? Is it possible to achieve this gradient without first defining it unde...">
Geek asks and answers

How can I use the "built-in" SVG gradient for an element of type <line>?

Is it possible to achieve this gradient without first defining it under <defs>?

I am working on a network card showing the network load on the connections between devices (switches, routers ..). I draw this using SVG, but I don’t want to define all the gradients, since the color of the beginning (ascending line) and end (descending line) is already transferred to me from the back system and is accessible through template variables in our application.

I want to use the built-in styles, since it’s much easier to make the code wise, since I don’t need to track thousands of link links and do not forget to specify the correct gradient for each link, since each gradient will be '99.9%' of the time, will be unique for each line (link-load), which I draw on my network card

Simply put, can I do something along the line <line stroke=<linearGradient...:? without having to define one and reference it? Like the 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/ )

+5
source share
2 answers

You can use the data URI, i.e. fill = "url (data: image / svg + xml; base64, ... encoded full svg ... # mygradient)"

: http://xn--dahlstrm-t4a.net/svg/paint/datauri-gradient.svg

+4

, , , , , , svg. , , . . SVG Params, , , .

, , <g> /, , :

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

(, , , , d3js).

, SVG Params ( . ), HTML- ( SVG- (?), inline <svg> HTML5). . demo HTML5 doctype , <svg> - svg content-type/.svg , .

, SVG Params script, , , .

SVG Params - ( ):

<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..
+3
source

More articles:


All Articles