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

Question

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 1

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

Answer 2

First of all, I probably should have thought of this before asking the question at all, but my excuse is that I'm still learning svg. And my suggested answer is probably not the fully correct either. See code example at bottom with SVG Params which probably is the best solution and not having to keep track of a changing link reference to a gradient.

I however solved my issue with wrapping the following code inside a <g> for every link/line I draw as shown below:

  <linearGradient id="gradientForLoopi" 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>
  <line stroke="url(#gradientForLoopi)" x1="130.8757632890282"
     y1="163.6818288670081" x2="651.9483366457684" y2="415.704113030817" />

(I probably didn't even need to do that either, but I did for the semantic purposes so I could work with d3js more easily).

Doing some more research on the field, a better solution would be to use SVG Params (draft as pr. writing) when it is commonly available in browsers with HTML5 doctype (only partly working with SVG context headers(?), and not inline <svg> inside a HTML5 document) See demo with HTML5 doctype not working, and the same <svg>-content with svg content-type/.svg working as it should here.

You can probably already now use the SVG Params draft using a prototyping script, which I didn't get to work and probably doesn't work in 'all common browsers'-yet.

With SVG Params you would simply do something along the lines (I assume):

<defs>
    <linearGradient id="linkload" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" style="stop-color:param(uplink_color);stop-opacity:1" />
          <stop offset="50%" style="stop-color:param(uplink_color);stop-opacity:1" />
          <stop offset="51%" style="stop-color:param(downlink_color);stop-opacity:1" />
          <stop offset="100%" style="stop-color:param(downlink_color);stop-opacity:1" />
    </linearGradient>
    <line stroke="url(#linkload)" x1="param(x1)"
        y1="param(y1)" x2="param(x2)" y2="param(y2)" />
</defs>

<use id="linkid" xlink:href="#linkload" x1="300" x2="0" y1="0" y2="300">
    <param name="downlink_color" value="#00ffff" />
    <param name="uplink_color" value="#006666" />
</use>
<use id="linkid" .. for every link..