在 svg 剪辑路径上应用过滤器
Apply filter on svg clip-path
我想在 svg 剪辑路径上应用滤镜。
这是我的代码,
<svg>
<filter id="filter">
<feGaussianBlur stdDeviation="10"></feGaussianBlur>
</filter>
<clipPath id="clip-path">
<rect width="200" height="100" x="0" y="0" filter="url(#filter)"/>
</clipPath>
<g clip-path="url(#clip-path)">
<image xlink:href="image.png" width="100%" height="100%" />
</g>
</svg>
有什么想法吗?
我认为您不能将滤镜直接应用于剪辑路径,但您可以像这样在包装器 g 元素上应用模糊:
<svg width="600px" height="300px">
<filter id="filter">
<feGaussianBlur stdDeviation="10"></feGaussianBlur>
</filter>
<clipPath id="clip-path">
<rect width="200" height="100" x="0" y="0" />
</clipPath>
<g filter="url(#filter)">
<g clip-path="url(#clip-path)">
<image xlink:href="http://image.png" width="100%" height="100%" />
</g>
</g>
</svg>
我想在 svg 剪辑路径上应用滤镜。
这是我的代码,
<svg>
<filter id="filter">
<feGaussianBlur stdDeviation="10"></feGaussianBlur>
</filter>
<clipPath id="clip-path">
<rect width="200" height="100" x="0" y="0" filter="url(#filter)"/>
</clipPath>
<g clip-path="url(#clip-path)">
<image xlink:href="image.png" width="100%" height="100%" />
</g>
</svg>
有什么想法吗?
我认为您不能将滤镜直接应用于剪辑路径,但您可以像这样在包装器 g 元素上应用模糊:
<svg width="600px" height="300px">
<filter id="filter">
<feGaussianBlur stdDeviation="10"></feGaussianBlur>
</filter>
<clipPath id="clip-path">
<rect width="200" height="100" x="0" y="0" />
</clipPath>
<g filter="url(#filter)">
<g clip-path="url(#clip-path)">
<image xlink:href="http://image.png" width="100%" height="100%" />
</g>
</g>
</svg>