How may I use 'inline' SVG gradient on an element like <line>?

svg gradient inline-styles
norrs picture norrs · May 29, 2012 · Viewed 7.8k times · Source

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/ ) ​

Answer

Robert Longson picture Robert Longson · May 29, 2012

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

Related questions

SVG gradient using CSS

I'm trying to get a gradient applied to an SVG rect element. Currently, I'm using the fill attribute. In my CSS file: rect { cursor: pointer; shape-rendering: crispEdges; fill: #a71a2e; } And the rect element has the correct fill color …

Read More
How to convert x,y coordinates to an angle?

Microsoft provide an excellent SVG gradient maker so IE9 can also have "CSS3" gradients (click Custom). I currently utilise their logic for my Fireworks and Dreamweaver extensions to convert gradients to SVG, but I only know how to do it …

Read More
Can I apply a gradient along an SVG path?

I'd like to put a simple loading indicator on my website that's triggered by a script. It should be a simple circle arc that's got a gradient and is spinning while the user is waiting. I haven't tried the animation …

Read More