如何將 SVG 夾到筆划內側？
[英]How to clip an SVG to the inside of the stroke?
問題描述
我正在嘗試剪輯 SVG 以消除兩側的筆划：具體而言，使用紅色矩形剪輯此平行四邊形以獲得右側的結果。
（形狀是恆定的，但大小和筆畫可能是可變的，所以我試圖避免直接用筆畫寬度進行數學運算）
我已經閱讀了很多關於 CSS 裁剪的教程，這些教程通常有一些使用多邊形裁剪路徑的簡單示例，然后進入 BNF 語法片段，描述如何在沒有任何有意義示例的情況下使用幾何框。
“使用幾何框值剪切元素”部分中有關剪切路徑的 此頁面說剪切路徑可以指定一個幾何框，該幾何框定義了相對於百分比的內容，其中一個選項是填充框。
.clip-me { 剪輯路徑：多邊形（10% 20%、20% 30%、50% 80%）邊距框； 保證金：10%； }
對於 SVG 元素，[geometry-box] 可以是填充框、描邊框和視圖框。 如果未指定 view-box，則 value view-box 將使用最近的 SVG 視口作為參考框。
我將此解釋為意味着用填充框替換邊距框將設置多邊形相對於我的示例中的藍色矩形（路徑填充的邊界框），所以我可以制作一個只有 100% 寬度的多邊形，>100 % 高度矩形。 實際上，當我將樣式設置為"clip-path: polygon(0% -30%, 0% 130%, 100% 130%, 100% -30%) fill-box"時，它根本不會剪輯，但沒有指定幾何框的等價物剪輯到筆畫的中線。
有沒有辦法設置相對於 SVG 路徑填充的邊界框的剪切路徑，所以我可以將其剪切到紅色框，或者以其他方式刪除這些邊線並保留填充？
我最小的可重現示例：
<html> <body> <svg width="960" height="960"> <g stroke-width="15" stroke="#000"> <path d="M20 35 l 160 -20 l 0 140 l -160 20 l 0 -140 z" fill="#ccc" style="clip-path: polygon(0% -30%, 0% 130%, 100% 130%, 100% -30%);" > </path> </g> </svg> </body> </html>
2 個解決方案
解決方案1
1 2020-04-17 19:33:32
SVG 中的筆划在路徑的兩側“溢出”，例如， 10px的筆划在外部有5px ，在內部有5px （覆蓋填充區域），這看起來就像在您的示例中發生的那樣。 您可以將您的clip-path放在組上，並復制您的路徑：下面：筆划； 上圖：填充。
<html> <body> <svg width="960" height="960"> <g style="clip-path: polygon(0% -30%, 0% 130%, 100% 130%, 100% -30%);"> <path d="M20 35 l 160 -20 l 0 140 l -160 20 l 0 -140 z" stroke-width="15" stroke="#000"/> <path d="M20 35 l 160 -20 l 0 140 l -160 20 l 0 -140 z" fill="#ccc"/> </path> </g> </svg> </body> </html>
解決方案2
1 已采納 2020-04-17 20:10:34
正如chriskirknielsen的回答所說，默認情況下，SVG 筆划以路徑為中心繪制。 不用復制路徑，您可以使用paint-order屬性使填充繪制在描邊上方，使描邊的內部部分不可見。
請注意，要保持筆觸的視覺寬度，您需要將其寬度加倍，因為實際上一半的寬度被填充覆蓋。
<html> <body> <svg width="960" height="960"> <g stroke-width="30" stroke="#000"> <path d="M20 35 l 160 -20 l 0 140 l -160 20 l 0 -140 z" fill="#ccc" style="clip-path: polygon(0% -30%, 0% 130%, 100% 130%, 100% -30%); paint-order: stroke;" > </path> </g> </svg> </body> </html>
什么是SVG中的筆畫和筆畫寬度以及它在HTML中的呈現方式？
[英]what is stroke and stroke width in SVG and how is it rendered in the HTML?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.