如何在像<line>这样的元素上使用'inline'SVG渐变？

Question

是否有可能实现这个梯度而不必首先定义它<defs>？

我正在开发一个网络地图,显示设备(交换机,路由器......)之间链路上的网络负载.我使用SVG绘制它,但我不想定义所有渐变,因为已经从后端系统向我提供了开始(上行链路)和结束(下行链路)颜色,并且可以通过我们的应用程序中的模板变量访问.

我希望使用内联样式,因为它更容易执行代码,因为我不必跟踪数千个链接引用并确保为每个链接指定正确的渐变,因为每个渐变将为'99 .9%'我在网络地图中绘制的每一行(链接加载)的时间都是唯一的

简单来说,我可以做一些事情: <line stroke=<linearGradient...？无需定义一个和引用它？像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

您可以使用数据 URI，即 fill="url(data:image/svg+xml;base64,...encoded full svg...#mygradient)"

这是一个例子：http ://xn--dahlstrm-t4a.net/svg/paint/datauri-gradient.svg