如何在 SVG 中使用笔划作为剪切路径?
How do I use a stroke as a clipping path in SVG?
我有如下路径:
<path class="path" d="M0,550L0,366.6666666666667C0,366.6666666666667,95.43389463154384,198.61111111111114,143.31860620206734,183.33333333333337C191.20331777259085,168.0555555555556..."></path>
这在我的页面上显示为:
我希望这是我显示一组矩形所依据的剪切路径。我目前让它看起来像这样:
但是,我希望它仍然是一条 2px 的线,当它进入新的 <rect>
领域时会改变颜色。我目前正在考虑通过某种方式将路径的笔画变成 <clipPath>
来解决这个问题,但我也愿意接受其他方法来实现这一点。
A <clipPath>
是这种情况下的错误方法。正确的解决方案是使用 <mask>
.
<svg width="500" height="240">
<defs>
<mask id="graph">
<path d="M 0,150 L 100,20 L 200,210 L 300,100 L 400,130 L 500,50"
fill="none" stroke="white" stroke-width="4"/>
</mask>
</defs>
<g mask="url(#graph)">
<rect y="0" width="500" height="60" fill="red"/>
<rect y="60" width="500" height="60" fill="blue"/>
<rect y="120" width="500" height="60" fill="green"/>
<rect y="180" width="500" height="60" fill="yellow"/>
</g>
</svg>
我有如下路径:
<path class="path" d="M0,550L0,366.6666666666667C0,366.6666666666667,95.43389463154384,198.61111111111114,143.31860620206734,183.33333333333337C191.20331777259085,168.0555555555556..."></path>
这在我的页面上显示为:
我希望这是我显示一组矩形所依据的剪切路径。我目前让它看起来像这样:
但是,我希望它仍然是一条 2px 的线,当它进入新的 <rect>
领域时会改变颜色。我目前正在考虑通过某种方式将路径的笔画变成 <clipPath>
来解决这个问题,但我也愿意接受其他方法来实现这一点。
A <clipPath>
是这种情况下的错误方法。正确的解决方案是使用 <mask>
.
<svg width="500" height="240">
<defs>
<mask id="graph">
<path d="M 0,150 L 100,20 L 200,210 L 300,100 L 400,130 L 500,50"
fill="none" stroke="white" stroke-width="4"/>
</mask>
</defs>
<g mask="url(#graph)">
<rect y="0" width="500" height="60" fill="red"/>
<rect y="60" width="500" height="60" fill="blue"/>
<rect y="120" width="500" height="60" fill="green"/>
<rect y="180" width="500" height="60" fill="yellow"/>
</g>
</svg>