筆畫可以用作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剪輯路徑的一部分嗎？

回答

相關問題