我正在编写一个显示图表并显示依赖关系的简单网页。我发现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/
上让我感到困惑的是,从左上角到右下角的第一行看起来与第二行完全相同,后者是“反向”:从右下角到左上角。
如何让路径始终以黄色开头并以红色结束?
答案 0 :(得分:3)
这不是错误。这是理解上的问题。
线性渐变的默认行为是沿着从对象左侧到其右侧的水平线过渡。如果您从左到右或从右到左绘制路径并不重要。在这两种情况下,渐变将按默认设置从左到右显示。
考虑下面的演示:
<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;
如果您想要在垂直线或角度线上进行颜色转换,则必须使用x1
和y1
指定线的起点。
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>
扩展上面的例子:
x1
&#13;
在您的示例中,您使用的是对角线路径,因此我们需要覆盖y1
个元素的x2
,y2
,<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>
元素上,这些值会改变渐变的方向,即从下到上。现在我们可以将这些渐变应用于各自的路径。
$route['method/en/(:any)/(:any)'] = 'method/$1/$2';
&#13;
注意: 此Question在当前问题的上下文中非常有用。