SVG：改变线条颜色中间路径

Question

所以，我想用路径创建多条折线。这些折线中的一些，我想用不同的颜色。有没有办法改变中间路径的颜色？

我猜答案是否定的。我需要使用不同的路径绘制不同的彩色线条。只是检查我是否错过了什么。

感谢。

Answer 1

这取决于路径，但在某些情况下，您可以使用渐变笔划执行此操作。

<svg>
    <defs>
        <linearGradient id="grad" x1="298" y1="0" x2="304" y2="0" gradientUnits="userSpaceOnUse">
            <stop stop-color="black" offset="0"/>
            <stop stop-color="red" offset="0.01"/>
            <stop stop-color="red" offset="0.7"/>
            <stop stop-color="black" offset="0.7"/>
        </linearGradient>
    </defs>
    <polyline points="20 20 300 20 300 100 400 100" stroke="url(#grad)" fill="none" stroke-width="4"/>
</svg>

请参阅fiddle。