svg - 如何在像 这样的元素上使用 'inline' SVG 渐变？

Question

是否可以在<defs> 下无需先定义就可以实现此渐变?

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

我希望使用内联样式，因为它更容易编写代码，因为我不必跟踪数千个链接引用并确保为每个链接指定正确的渐变，因为每个渐变都会“99.9%”我在网络 map 中绘制的每条线(链接加载)的时间都是唯一的

简单来说，我能不能做点什么:<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