在SVG中使用CSS filter,可以通過在SVG元素的style
屬性中使用CSS的filter
屬性來實現。例如,可以在SVG的<rect>
元素中添加一個style
屬性,并在其中設置filter
屬性來應用一個濾鏡效果:
<svg width="100" height="100">
<rect x="10" y="10" width="80" height="80" style="filter: blur(5px);"/>
</svg>
上面的示例中,我們在一個矩形元素中應用了一個模糊濾鏡效果。你可以在style
屬性中使用任何CSS的濾鏡效果來改變SVG元素的外觀。需要注意的是,并非所有的CSS濾鏡效果都適用于SVG元素,具體適用的效果可以參考MDN的文檔:https://developer.mozilla.org/en-US/docs/Web/CSS/filter
另外,也可以通過在外部的CSS文件中定義一個濾鏡效果,并在SVG元素中引用該濾鏡效果的方式來使用CSS filter。示例代碼如下:
<style>
.blur-filter {
filter: blur(5px);
}
</style>
<svg width="100" height="100">
<rect x="10" y="10" width="80" height="80" class="blur-filter"/>
</svg>
上面的示例中,我們在外部的CSS文件中定義了一個名為blur-filter
的類,該類應用了一個模糊濾鏡效果。然后,在SVG元素的class
屬性中引用該類來應用濾鏡效果。