笔画可以用作SVG剪辑路径的一部分吗？

我正在编写来自MuPDF的SVG输出，而我已经遇到了SVG功能似乎有限的问题。我想我会在这里问的情况下，这是一个已知的问题与已知的解决方法（或者如果我在做一些愚蠢的事！）笔画可以用作SVG剪辑路径的一部分吗？

我有以下SVG：

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="21.59cm" height="27.94cm" viewBox="0 0 600 600"> 
<path stroke-width="12" fill="none" stroke="#0000ff" d="M 150 300 L 80 300 L 80 370 L 150 370 " /> 
<clipPath id="cp0"> 
<path stroke-width="12" fill="none" stroke="#000000" d="M 150 300 L 80 300 L 80 370 L 150 370 " /> 
</clipPath> 
<g clip-path="url(#cp0)"> 
<rect fill="#ff0000" x="0" y="0" width="600" height="600"/> 
</g> 
</svg>

这绘制描边路径（形状像'['蓝色）。然后它将相同的路径设置为剪切路径，并将剪切路径填充为红色。

我希望剪切路径将设置为路径的描边版本，因此红色形状将完全覆盖蓝色。然而，在我的测试中，路径的“填充或描边”被忽略，路径被“填充” - 因此我得到了一个在蓝色形状内绘制的红色正方形。

有没有办法获得我期待的行为？或者我将不得不编写代码来手动将路径压平并将其输出到SVG之前？

在此先感谢您的回复！

来源

2013-05-08 Robin Watts

svg中的剪辑路径只是形状，而不是形状的特征，所以换句话说，你不会得到笔画。你可以做的就是使用一个蒙版，将蒙版中路径的描边设置为白色。

这里的an example：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 600 600"> 
    <defs> 
    <mask id="m0" maskUnits="userSpaceOnUse" x="0" y="0" width="600" height="600"> 
     <path fill="none" stroke="white" stroke-width="5" d="M 150 300 L 80 300 L 80 370 L 150 370" /> 
    </mask> 
    </defs> 

    <path stroke-width="12" fill="none" stroke="#0000ff" d="M 150 300 L 80 300 L 80 370 L 150 370 " /> 
    <g mask="url(#m0)"> 
    <rect fill="yellow" x="0" y="0" width="600" height="600" /> 
    </g> 
</svg>

来源

2013-05-09 06:35:41

当然！愚蠢的我不要想到这一点。你是完全正确的，这完全消除了它。非常感谢！ – 2013-05-09 10:56:11

伟大的解决方案，但是FWIW，'mask'的性能似乎比'clipPath'更糟糕。我假设'mask'需要光栅化，而'clipPath'大概是一个矢量操作。 – Ricky 2017-01-19 21:22:55

笔画可以用作SVG剪辑路径的一部分吗？

回答

相关问题