這是我第一次使用 SVG 在圖片上制作透明區域（標記為紅色），可能我有一個非常幼稚的問題，我根據
<img src="https://i.stack.imgur.com/iZ7xG.jpg" style="clip-path: url(#myClip);">
<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="myClip" clipPathUnits="objectBoundingBox">
<polygon points="0 0, 0 1, .54 .99, .5682 .156, .746 .151, .7397 .557, .51 .508, .54 .99, 1 1, 1 0" />
<polygon points="0 0, 0 1, .737 1, .747 .321, .816 .321, .81 .666, .74 .645, .74 1, 1 1, 1 0" />
/* It doesn't work, but if delete one of them so its work with only one polygon */
</clipPath>
</defs>
</svg>uj5u.com熱心網友回復：
您還可以使用具有交替路徑方向的復合路徑。
如此處所述：
uj5u.com熱心網友回復：
這并不奇怪，這不起作用。您正在嘗試制作“反向”剪輯路徑。剪輯路徑隱藏其形狀之外的任何內容。但是您只想隱藏形狀內部的內容。為此，您繪制一個由邊界框和您的形狀組成的圓環，然后剪下一條線以形成一個連續的多邊形。
現在想想剪輯路徑中的多個形狀是如何作業的：其中一個形狀內的所有內容都會顯示出來。兩種形狀之外的所有東西都被隱藏了。
多邊形的形成方式，您要隱藏的區域在一個形狀內，在另一個形狀之外。因此，它們仍然可見。
在這種情況下，使用口罩要容易得多。它通過著色形狀來作業。顯示所有白色（亮度 = 1），隱藏所有黑色（亮度 = 0）。
<img src="https://i.stack.imgur.com/iZ7xG.jpg" style="mask: url(#myMask);">
<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg">
<defs>
<mask id="myMask" maskContentUnits="objectBoundingBox">
<!--white surrounding rectangle: visible-->
<rect width="1" height="1" fill="white" />
<!-- black cutout shapes: hidden -->
<polygon points=".556 .518, .5682 .156, .746 .151, .7397 .557" fill="black" />
<polygon points=".747 .321, .816 .321, .81 .666, .74 .645" fill="black" />
</mask>
</defs>
</svg>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/516166.html
標籤：svg多边形剪辑路径
下一篇：SVG滑鼠相對于轉換元素的位置