如何使用'；内联'；元素上的SVG渐变，如<；线路>；？

是否可以在不必首先在

下定义梯度的情况下实现此梯度

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

我希望使用内联样式，因为在代码方面更容易做到，因为我不必跟踪数千个链接引用，并确保为每个链接指定正确的渐变，因为每个渐变在网络地图中绘制的每一行（链接负载）都“99.9%”是唯一的

---

简单地说，我可以这样做吗：

您可以使用一个数据URI，即fill=“url（data:image/svg+xml；base64，…encoded full svg…#mygradient）”

这里有一个例子：
首先，我可能在问这个问题之前就应该想到这一点，但我的借口是我还在学习svg。我建议的答案可能也不完全正确。请参阅底部的代码示例，该示例可能是最佳解决方案，并且不必跟踪渐变的不断变化的链接引用

但是，我解决了我的问题，将以下代码包装在一个
中，用于我绘制的每个链接/线条，如下所示：

  <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）

在该领域做更多的研究，更好的解决方案是在HTML5 doctype浏览器中普遍使用（草稿作为公关写作）（仅部分使用SVG上下文标题（？），而不是在HTML5文档中内联
），请参阅HTML5 doctype不工作，同样的
-内容具有svg内容类型/.svg正常工作

现在，您可能已经可以使用a来使用该草案了，我还没有开始使用，而且可能还不能在“所有通用浏览器”中使用

与你一起做一些简单的事情（我假设）：


+一个漂亮的把戏！遗憾的是，这在Safari v5.1.7或Chrome V19上不起作用这可能是内联SVG，但不是我想要的。我将在下面发布我的解决方案和研究。
<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..