I am using HeroIcons with Tailwind CSS. You can change the color of the icons to a solid color by adding a text-color class to the svg. How do you make the color a gradient? I tried doing something like this:
<div id="gradient" className={`bg-gradient-to-tr from-black to-white`}>
<XIcon
className="w-7 h-7"
style={{ fill: 'url(#gradient)' }}
/>
</div>
But the SVG doesn't clip the background.
Related
I have read a number of posts that answer how to remove the space under a .svg file. I have tried to use the "display: block;" without any luck. I think it is because I am not sure where to place the code to make it work.
A link to my js fiddle is at the following: [where do I put display block in .svg doc][1]
[1]: https://jsfiddle.net/bethabernathy/gsarhk4c/
Any help would be greatly appreciated. Thanks, Beth
Your main problem is that your viewBox is wrong.
If you want the circle to fill the area given to the SVG, then the viewBox has to match the dimensions of the circle. Your circle has a width and height of 75, but your viewBox describes an area 135 wide and high.
To avoid this in the future when using Illustrator, you should either:
Scale your image so that it fills the artboard, or
Uncheck the "Use artboards" option when saving as SVG.
The second problem (that display:block fixes) only becomes apparent when you have fixed the viewBox issue.
Have a look at the following example. There are three versions of the SVG wrapped in a <div>:
Your original SVG. I have simplified the SVG to remove some of the icon unneeded for this demo. I have also removed the SVG boilerplate that is not needed when SVGs are being inlined.
The SVG with fixed viewBox. Note the little gap at the bottom between the SVG and the bottom of the <div>.
Same as #2 but with display: block applied to the SVG. Note the gap at the bottom is now gone.
div {
border: solid 1px grey;
width: 300px;
float: left;
margin-right: 10px;
}
#example3 svg {
display: block;
}
<div id="example1">
<svg viewBox="0 0 135 135">
<style type="text/css">
.st0{fill:#398439;}
</style>
<circle class="st0" cx="37.5" cy="37.5" r="37.5"/>
</svg>
</div>
<div id="example2">
<svg viewBox="0 0 75 75">
<style type="text/css">
.st0{fill:#398439;}
</style>
<circle class="st0" cx="37.5" cy="37.5" r="37.5"/>
</svg>
</div>
<div id="example3">
<svg viewBox="0 0 75 75">
<style type="text/css">
.st0{fill:#398439;}
</style>
<circle class="st0" cx="37.5" cy="37.5" r="37.5"/>
</svg>
</div>
I'm trying to clip a div with svg clip-path, because css rule clip-path: url(#foo) have poor support. So I thought may be i can attach svg clip-path to a div with html attribute clip-path="#foo". Like in the example here - link. But it doesn't work.
This is my svg element and div.
<svg class="svg-graphic">
<defs>
<clippath id="hexagonal-mask">
<polygon points="130,0 0,160 0,485 270,645 560,485 560,160" />
</clippath>
</defs>
<div class="element" clip-path="#hexagonal-mask">
<div class="content">
<h2>How it works</h2>
<p>
Download<span class="icon"></span>
</p>
<p>
Watch video and Play games<span class="icon"></span>
</p>
<p>
Choose your <span class="icon"></span>
</p>
</div>
</div>
</svg>
When i open an element inspector, i see that my div somehow appears outside of the svg element.
http://prntscr.com/ay7kxt
And clip-path doesn't apply.
Am i doing something wrong or is this aproach just doesnt work with divs, only with shapes like , ?
I have a menu-icon in svg where I want a part of the icon to animate on hover, not the entire icon. How can I target with a keyframe-animation when hovering the icon?
I have another menu-icon where I'm animating the entire icon on hover, but the one I'm askin here only needs one part of it to move...
You can target inner svg elements by giving them id's and then you can select them with css.
i made this short fiddle to show how you can select the right element. i did not include keyframes because im not a animation guru with css.
http://jsfiddle.net/Z6zKd/
<svg width="100px" height="100px">
<rect id="rectangle" width="100px" height="100px" fill="#000"></rect>
<rect x="30px" id="subrectangle" width="50px" height="50px" fill="#DDD"></rect>
</svg>
css:
svg:hover #subrectangle{
transform: rotate(60deg);
transition: all 0.5s;
fill: #FFF;
left: 50px;
}
I have, in my SVG, a foreignObject which contains a p element. I want the height of this structure to be adapted to the height of my text.
The p element is already adapted : I've done nothing for that.
But I have troubles for the foreignObject. If I remove the field height, it doesn't work. height:auto doesn't work either.
Since there is no real use of scaling up and down the foreignObject itself, then you can set both foreignObject height and width to 1, and via CSS set foreignObject { overflow: visible; } to make its content visible whatever it is and do whatever you need to do it with it.
You can set height of the foreignObject element in em units, maybe that could help?
Right now the width and height attributes of a foreignObject are required, and must have values > 0, otherwise the element will not be rendered.
Update: An alternative is to just set the dimensions of the foreignObject to 100%, and use the fact that the foreignObject has a transparent background per default. Since other elements in svg are laid out in an absolute manner anyway they don't depend on the foreignObject size.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
p { position: absolute; top: 50%; left: 50%; width: 100px; }
</style>
<circle cx="50%" cy="50%" r="25%" fill="lightblue"/>
<foreignObject width="100%" height="100%">
<p xmlns="http://www.w3.org/1999/xhtml">
some wrapped text...
some wrapped text...
some wrapped text...
some wrapped text...
</p>
</foreignObject>
</svg>
I'm trying to add a border around a svg image. I have tried 2 approaches but both failed...
Attempt 1 : Draws image but no border..
<image id="note-0" xlink:href="http://example.com/example.png" x="185" y="79" height="202" width="150" style="stroke:#ac0d0d; stroke-width:3;"></image>
Attempt 2 : Draws image but no border..
<defs>
<image id="image1352022098990svg" height="202" width="150" xlink:href="http://example.com/example.png"></image>
</defs>
<use xmlns="http://www.w3.org/2000/svg" id="note-0" xlink:href="#image1352022098990svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="185" y="79" height="202" width="150" style="stroke:#ac0d0d; stroke-width:3;"/>
So my question is, is it possible to define a image on a svg element and have a border/stroke around it at the same time?
Futhermore it seems i can position svg elements with translate and with the x/y attribute. Which is preffered and why?
stroke does not apply to <image> or <use>, only shapes and text. If you want to draw a border round it, draw a <rect> after the image with the same x,y,width and height as the image and give that a stroke and a fill of "none".
As to translate vs x/y - it depends on your use case.
If for some reason you cannot change the SVG elements, there is a workaround using the outline CSS property:
#note-0 {
outline: 6px solid white;
}
If you need it to wrap around a circular image (svg shape for example), and you just need some color to outline it, you may find something like this useful:
image {
filter: drop-shadow(0px 0px 1px red);
}