如何在像 <line> 这样的元素上使用“内联”SVG 渐变？

Question

是否可以在不必先在<defs>下定义的情况下实现这种渐变？

我正在制作一张网络地图，显示设备（交换机、路由器……）之间链路上的网络负载。我使用 SVG 绘制此图，但我不想将所有渐变定义为开始（上行链路）和结束（下行链路）颜色已从后端系统提供给我，并可通过应用程序中的模板变量访问。

我希望使用内联样式，因为我不必跟踪数千个链接引用并确保我为每个链接指定正确的渐变，因为每个渐变都会' 99.9%'的时间对于我在网络地图中绘制的每一行（链接加载）都是唯一的

简单来说，我可以做点什么：<line stroke=<linearGradient... 吗？无需定义一个并引用它？ CSS 中的like 样式：<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

Answer 2

首先，我可能在问这个问题之前就应该想到这一点，但我的借口是我还在学习 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（作为公关写作草案），当它在具有 HTML5 文档类型的浏览器中通常可用时（仅部分使用 SVG 上下文标头（？），而不是在 HTML5 文档中内联 <svg>）请参阅 demo 与 HTML5 doctype not working，以及相同的 <svg>-content 与 svg content-type/.svg working 应该是here。

您现在可能已经可以使用prototyping script 来使用SVG Params 草稿，我还没有开始工作，而且可能还不能在“所有常见浏览器”中工作。

使用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..