svg路径元素中的定向渐变答案

【问题标题】：directed gradient in svg's path elementsvg路径元素中的定向渐变
【发布时间】：2018-02-05 14:34:51
【问题描述】：

我正在编写一个显示图表并显示依赖关系的简单网页。我发现path 元素在svg 中的呈现方式出现了意外行为。

这是示例的完整 HTML：

<html>
    <body>
        <svg id="svgConnections" xmlns="http://www.w3.org/2000/svg" style="width: 300px; height: 120px">
            <defs>
                <linearGradient id="grad1" >
                <stop offset="0%" style="stop-color:yellow;stop-opacity:1" />
                <stop offset="100%" style="stop-color:red;stop-opacity:1" />
                </linearGradient>
            </defs>            
            <path d="M40,40 L100,100 Z" stroke="url(#grad1)" strokeWidth="1px" />
            <path d="M200,100 L140,40 Z" stroke="url(#grad1)" strokeWidth="1px" />
        </svg>
    </body>
</html>

同样的例子在https://jsfiddle.net/4fLjm0e2/

让我烦恼的是，从左上角到右下角的第一行看起来与第二行“相反”：从右下角到左上角。

如何让路径始终以黄色开始并以红色结束？

【问题讨论】：

我刚刚阅读了文档，但没有找到任何可以轻松帮助您的内容。一种解决方案是根据线的方向设置x1、x2、y1、y1（<linearGraient> 的属性），但我希望有一个简单的解决方案。

标签： javascript html dom svg

【解决方案1】：

这不是错误。这是理解上的问题。

线性渐变的默认行为是沿水平线从对象的左侧过渡到其右侧。无论您是从左到右还是从右到左绘制路径都没有关系。在这两种情况下，渐变都会按照默认设置从左到右显示。

考虑下面的演示：

<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="grad1" gradientUnits="userSpaceOnUse">
      <stop offset="0%" style="stop-color:yellow;stop-opacity:1" />
      <stop offset="100%" style="stop-color:red;stop-opacity:1" />
    </linearGradient>
  </defs>
  <g stroke-width="2">
    <path d="M10,40 L110,40 Z" stroke="url(#grad1)" />
    <path d="M110,70 L10,70 Z" stroke="url(#grad1)" />
  </g>
</svg>

如果您希望颜色的过渡发生在垂直线或以一定角度的线，则必须使用 x1 和 y1 属性及其以x2 和y2 属性结束的点。

我们不会将停靠点复制到每个<linearGradient> 元素中，而是使用xlink:href 属性来引用原始渐变。停靠点将被继承，但 x 和 y 坐标将被每个单独的渐变覆盖。

<linearGradient id="grad1" x1="0" y1="0" x2="1" y2="1">
  <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
  <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
<linearGradient id="grad2" xlink:href="#grad1" x1="1" y1="1" x2="0" y2="0"></linearGradient>

扩展上面的例子：

<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="grad1" gradientUnits="userSpaceOnUse">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
    <linearGradient id="grad2" xlink:href="#grad1" x1="120" y1="0" x2="0" y2="0"></linearGradient>
  </defs>
  <g stroke-width="2">
    <path d="M10,40 L110,40" stroke="url(#grad1)" />
    <path d="M110,70 L10,70 Z" stroke="url(#grad2)" />
  </g>
</svg>

在您的示例中，您使用的是对角路径，因此我们需要覆盖 <linearGradient> 元素的 x1、y1、x2 和 y2 属性。

第一个 <linearGradient> 元素上的这些值将覆盖默认的从左到右设置，以生成从左上角到右下角的对角线渐变。
在<linearGradient> 元素上，这些值将改变渐变的方向，即从底部到顶部。

现在我们可以将这些渐变应用到各自的路径上。

<svg width="300" height="120" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="grad1" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
    <linearGradient id="grad2" xlink:href="#grad1" x1="1" y1="1" x2="0" y2="0"></linearGradient>
  </defs>
  <g stroke-width="2">
    <path d="M40,40 L100,100 Z" stroke="url(#grad1)" />
    <path d="M200,100 L140,40 Z" stroke="url(#grad2)" />
  </g>
</svg>

注意：这个Question 在当前问题的上下文中很有用。

【讨论】：