我有兩個正方形。
最終目標是獲得兩個合并的 svg 物件的圓形輪廓。所以，為了實作這一點，我首先模糊了它們，
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
然后，我將不透明度乘以 30 并減去 255*-9，增加對比度并合并兩個形狀
<feColorMatrix
in="blur"
type="matrix"
values="
1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 30 -9"
result="goo"
/>
但我想要的結果不是這個。我想得到這個形狀的輪廓。有沒有辦法做到這一點？
uj5u.com熱心網友回復：
如果您只想要輪廓，請在過濾器中添加 feMorphology/dilate 和 Composite/out。
（如果您想從 goo 中減去原始方塊，則省略 feMorphology 并將“goo”更改為 feComposite/out 中的 SourceGraphic。）
<svg width="800px" height="600px" viewBox=" 0 0 400 400">
<defs>
<filter id="outline" x="-50%" y="-50%" height="200%" width="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
<feColorMatrix type="matrix"
values="
1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 30 -9" result="goo"/>
<feMorphology operator="dilate" radius="1"/>
<feComposite operator="out" in2="goo"/>
/>
</filter>
</defs>
<g filter="url(#outline)">
<rect fill="red" x="10" y="30" width="100" height="100"/>
<rect fill="red" x="120" y="30" width="100" height="100"/>
</g>
</svg>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/451850.html