Is it possible to achieve this gradient without having to define it first under

Question

0

Asked: June 4, 20262026-06-04T16:52:24+00:00 2026-06-04T16:52:24+00:00

Is it possible to achieve this gradient without having to define it first under

0

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