Menu
I have the following SVG graphic:
<svg width='36' height='30'> <defs> <linearGradient id="normal-gradient" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:rgb(81,82,84); stop-opacity:.4"/> <stop offset="100%" style="stop-color:rgb(81,82,84); stop-opacity:1"/> </linearGradient> <linearGradient id="rollover-gradient" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:rgb(0,105,23); stop-opacity:.5"/> <stop offset="100%" style="stop-color:rgb(0,105,23); stop-opacity:1"/> </linearGradient> <linearGradient id="active-gradient" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:rgb(0,0,0); stop-opacity:.4"/> <stop offset="100%" style="stop-color:rgb(0,0,0); stop-opacity:1"/> </linearGradient> </defs> <text x="8" y="25" style="font-size: 29px;" font-family="Arial">hello world</text> </svg>' I set the fill attribute of the text element through CSS and switch between the various gradients depending on the hover state. This works great in Chrome & Safari, but in Firefox, the text doesn't show up. Upon inspecting the element, I discovered that Firefox is appending none to the end of my fill: url(#...) CSS attribute. I tried deleting the none keyword with Firebug, but Firebug just deletes the entire attribute. Why is this happening?
EDIT: I should note that if I remove the CSS that sets the fill property, and hardcode the fill attribute into the text element (not through an inline style attribute), the text displays properly in all browsers.
366
The fill is the color inside a shape, and the stroke is the visible outline of an object. You can fill a shape with one color and stroke it with another. If you create an SVG shape but don't set the fill color, the shape will be colored in black.
To use a gradient, we have to reference it from an object's fill or stroke attributes. This is done the same way you reference elements in CSS, using a url . In this case, the url is just a reference to our gradient, which I've given the creative ID, "Gradient". To attach it, set the fill to url(#Gradient) , and voila!
The SVG fill property paints the interior of a graphic with a solid color, gradient, or pattern. Using SVG inline enables full control of such properties on elements throughout the SVG document fragment within HTML. In most cases what is considered to be the “inside” of a graphic is straightforward.
SVG provides for two types of gradients: linear gradients and radial gradients. Once defined, gradients are then referenced using 'fill' or 'stroke' properties on a given graphics element to indicate that the given element shall be filled or stroked with the referenced gradient.
Figured it out. In my CSS, I was referring to the gradients in the same way I was originally referencing the fill inline:
#myselector { fill: url('#gradient-id'); } To get it working in Firefox, I had to change it to this:
#myselector { fill: url('/#gradient-id'); } Not sure why this is. Maybe it has something to do with the directory structure containing my stylesheet?
144
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With