我有過濾器在<g>帶有剪輯路徑的元素內部作業。
<g ref="backSphere" id="backSphere"></g>
<g style="clip-path: url(#clip)">
<use xlink:href="#backSphere" style="filter: url(#blur)"></use>
</g>
有沒有一種簡單的方法可以“反轉”它，以便過濾器有效地應用于剪輯路徑“外部”的所有內容？
我當前的用例是一個矩形，但更一般的答案也將不勝感激。
我知道我可以，在大多數情況下：
- 用一個過濾器覆寫整個 SVG，然后嘗試用另一個過濾器計算所應用過濾器的倒數：由于計算不理想，可能會影響雙過濾器性能，并且可能無法精確計算。
- 創建一組零碎的過濾器元素，以拼湊在我想要的形狀周圍的覆寫范圍內：由于個人定位不理想，而且無論是運動還是更復雜的形狀，這都是一只熊。
uj5u.com熱心網友回復：
反轉剪輯路徑，而不是過濾器。
SVG 剪輯路徑可以包含多個圖形圖元，例如兩個矩形。在這種情況下，
子元素的輪廓在邏輯上或在一起以創建單個輪廓
但是如果你使用單個<path>元素，路徑可以由多個子路徑組成，然后剪輯的內容由clip-rule屬性決定。
<clipPath id="clip" clipPathUnits="userSpaceOnUse">
<rect x="0" y="0" width="100" height="100"/>
<rect x="30" y="30" width="40" height="40"/>
</clipPath>
只會剪輯到第一個更大的矩形。但是用等效的子路徑交換矩形，
<clipPath id="clip" clipPathUnits="userSpaceOnUse">
<path d="M0,0 h100 v100 h-100 z M30,30 h40 v40 h-40 z" clip-rule="evenodd"/>
</clipPath>
剪輯到兩個矩形子路徑之間的所有內容。
這就是您的解決方案：將覆寫您的整個視口（或至少過濾器區域）的外部矩形添加到您的剪輯路徑。
如果您想保留 grafical 圖元，您可以使用 a<mask>而不是剪輯路徑。白色區域將可見，黑色區域將被隱藏：
<mask id="clip">
<rect x="0" y="0" width="100%" height="100%" fill="white"/>
<rect x="30" y="30" width="40" height="40" fill="black"/>
</mask>
這有一個額外的好處，您可以用百分比單位撰寫大矩形，這對于回應行為很有用。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/454213.html