在svg clip-path上应用过滤器

时间:2016-06-03 11:09:52

标签: svg svg-filters 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>

有什么想法吗?

1 个答案:

答案 0 :(得分:3)

我不相信你可以直接将过滤器应用于剪辑路径,但你可以在这样的包装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>