logo标签列表

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

svggradientinline-styles
10
不必在<defs>下先定义渐变色，也可以实现这种渐变吗？
我正在制作一个显示设备（交换机、路由器等）之间网络负载的网络地图。 我使用SVG进行绘制，但我不想定义所有的渐变色，因为上行和下行颜色已经从后端系统中给出，并通过我们应用程序中的模板变量访问。
我希望使用内联样式，因为它在代码方面更容易处理，而且我不必跟踪数千个链接引用，并确保为每个链接指定正确的渐变色，因为我在网络地图中绘制的每条线（链接负载）的渐变色几乎都是独特的。
简单来说，我能否做一些类似于这样的操作：<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/） ​
2个回答
5
4
+1 棒极了！遗憾的是，这在Safari v5.1.7或Chrome v19上不起作用。 - Phrogz
这可能是内联SVG的定义，但不是我正在寻找的。我将在下面发布我的解决方案和研究。 - norrs
你确定这个例子能如你所期望的那样工作吗？文本甚至说“带有蓝色描边的矩形应该完全被相同的渐变填充”，这意味着他们期望数据URI能够工作（并填充底部），就像<defs>线性渐变填充顶部一样。这里有一个 使用base64编码渐变 的例子与传统线性渐变 ，但我无法让第一个例子工作？ - KyleMit
1
@KyleMit 看起来你发现了一个 Chrome 的 bug，可能是这个。与此同时，试试 Firefox，它可以正常工作。 - Robert Longson
哦，原来是这样 - 谢谢罗伯特！真遗憾，如果它只在FF中运行，我可能无法使用这个解决方案。 - KyleMit
3
首先，我在提出问题之前应该考虑到这一点，但我的借口是我还在学习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。

通过进一步研究该领域，更好的解决方案是在支持HTML5 doctype的浏览器中使用SVG Params（草案）。只有部分工作在SVG上下文标题中，不支持HTML5文档内的内联<svg>。请参见演示，其中HTML5文档不起作用，而具有svg内容类型/.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..
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接