svg路径元素中的有向渐变

时间:2017-08-28 10:36:47

标签: javascript html dom svg

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

以下是该示例的完整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/

让我感到困惑的是,从左上角到右下角的第一行看起来与第二行完全相同,后者是“反向”:从右下角到左上角。

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

1 个答案:

答案 0 :(得分:3)

  

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

线性渐变的默认行为是沿着从对象左侧到其右侧的水平线过渡。如果您从左到右或从右到左绘制路径并不重要。在这两种情况下,渐变将按默认设置从左到右显示。

考虑下面的演示:

&#13;
&#13;
<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>
&#13;
&#13;
&#13;

如果您想要在垂直线或角度线上进行颜色转换,则必须使用x1y1指定线的起点。 x2属性及其带有y2<linearGradient>属性的结束点。

我们不是将句点复制到每个xlink:href元素中,而是使用<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> 属性来引用原始渐变。止点将被继承,但x和y坐标将被每个单独的梯度覆盖。

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

扩展上面的例子:

&#13;
&#13;
x1
&#13;
&#13;
&#13;

在您的示例中,您使用的是对角线路径,因此我们需要覆盖y1个元素的x2y2<linearGradient><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>元素上,这些值会改变渐变的方向,即从下到上。

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

&#13;
&#13;
$route['method/en/(:any)/(:any)'] = 'method/$1/$2';
&#13;
&#13;
&#13;

注意: Question在当前问题的上下文中非常有用。