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 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（草稿作为pr。写作），当它在具有HTML5 doctype的浏览器中通常可用时（仅部分使用SVG上下文标题（？），而不是HTML5文档中的内联<svg>）请参阅demo HTML5 doctype 无法正常工作，并使用相同的<svg> - 内容与svg内容类型/ .svg 正常工作应该here。

您现在可能已经使用SVG Params使用prototyping 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..

如何在<line>？</line>等元素上使用“内联”SVG渐变

2 个答案: