Menu
Is it possible to achieve this gradient without having to define it first under <defs>?
I'm working on a network map showing network load on links between devices (switches, routers ..). I draw this using SVG, but I don't want to define all gradients as the start (uplink) and end (downlink) color is already given to me from the back end system and accessible through template variables in our application.
I wish to use inline-styles as it is much easier to do code wise as I don't have to keep track of thousands of link references and make sure I specify the right gradient for every link, as every gradient will '99.9%' of the time be unique for every line (link-load) I draw in my network map
Put in simple words, can I do something along the line: <line stroke=<linearGradient... ? without having to define one and reference back to it? Like style in CSS: <span style='color: blue'> .. </span>
<svg width="1024" height="800">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#000066;stop-opacity:1" />
<stop offset="50%" style="stop-color:#000066;stop-opacity:1" />
<stop offset="51%" style="stop-color:#00ffff;stop-opacity:1" />
<stop offset="100%" style="stop-color:#00ffff;stop-opacity:1" />
</linearGradient>
</defs>
<text x="50" y="50" fill="red">foo bar</text>a
<line stroke="url(#grad1)" x1="130.8757632890282"
y1="163.6818288670081" x2="651.9483366457684" y2="415.704113030817" />
</svg>
( http://jsfiddle.net/GgJnB/ )
539
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!
SVG Gradient is used to smooth transition one color to another color within a shape. SVG provides two types of gradients. Linear Gradients: Transition from one direction to another. Radial Gradients: Transition circularly from one color to another from one direction to another.
The x1, x2, y1,y2 attributes of the <linearGradient> tag define the start and end position of the gradient. The color range for a gradient can be composed of two or more colors. Each color is specified with a <stop> tag. The offset attribute is used to define where the gradient color begin and end.
You could use a data URI i.e. fill="url(data:image/svg+xml;base64,...encoded full svg...#mygradient)"
Here's an example: http://xn--dahlstrm-t4a.net/svg/paint/datauri-gradient.svg
80
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
