8

是否可以在不必先定义它的情况下实现这个渐变<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/ )​</p>

4

2 回答 2

4

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

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

于 2012-05-29T12:05:40.470 回答
3

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

然而，我解决了我的问题，将以下代码包装在<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 参数（作为 pr.写作的草稿），当它在具有 HTML5 文档类型的浏览器中通常可用时（仅部分使用 SVG 上下文标头（？），而不是内<svg>联HTML5 文档）请参阅HTML5 doctype not working的演示，以及与 svg content-type/.svg相同的内容在此处正常工作。<svg>

您现在可能已经可以使用原型脚本来使用SVG 参数草稿了，我还没有开始工作，而且可能还不能在“所有常见浏览器”中工作。

使用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..
于 2012-05-30T07:18:23.293 回答