SVG实现局部高斯模糊效果实例页面

回到相关文章 »

效果：

代码：

HTML代码：
<svg
  width="256"
  height="192"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <filter id="zxxBlur">
    <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
  </filter>
  <filter id="zxxShadow">
    <feDropShadow in="SourceGraphic" dx="5" dy="5" stdDeviation="5" flood-color="#0005" />
  </filter>
  <clipPath id="zxxClip">
    <rect x="40" y="35" width="160" height="80" />
  </clipPath>
  <image href="example.jpg" width="90%" filter="url(#zxxShadow)" />
  <image 
    href="example" width="90%" 
    clip-path="url(#zxxClip)" 
    filter="url(#zxxBlur)" 
  />
</svg>