我正在使用Javascript创建不同长度和位置的L形路径。我希望将线性渐变作为它们的描边,其中第一个停止偏移量位于x = 10像素处,即颜色变化始终在x像素之后发生。
通常,使用渐变的方式只提供相对定位(例如相对于对象边界框)。这会导致由于不同的对象边界框而产生不同的停止偏移量。
以下是一个示例:
有没有一种方法可以通过SVG嵌套或JavaScript巧妙地引用同一个渐变?
通常,使用渐变的方式只提供相对定位(例如相对于对象边界框)。这会导致由于不同的对象边界框而产生不同的停止偏移量。
以下是一个示例:
path.p1 {
fill: none;
stroke-width: 20px;
}
<svg height="600" width="1000">
<path class="p1" d="M10 10 V 100 H 100 " stroke="url(#cl1)"/>
<path class="p1" d="M150 10 V 100 H 200 " stroke="url(#cl1)"/>
<path class="p1" d="M250 10 V 100 H 400 " stroke="url(#cl1)"/>
<defs>
<linearGradient id="cl1" gradientUnits="objectBoundingBox" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0" style="stop-color:grey;stop-opacity:1" />
<stop offset="0.02" style="stop-color:grey;stop-opacity:1" />
<stop offset="0.15" style="stop-color:orange;stop-opacity:1" />
<stop offset="0.2" style="stop-color:orange;stop-opacity:1" />
</linearGradient>
</defs>
</svg>