Question

我正在尝试在svg中创建模糊滤镜，但我只希望它出现在图像的蒙版部分。建议的方法是使用<feImage />过滤器。但是，我模糊的内容是动态svg，而不是简单的位图。

我设法通过将两个svg相互叠加来使其工作。一个带有过滤器和面罩，另一个没有。我宁愿不使用此方法两次渲染同一件事。是否可以在单个svg中执行此操作而无需复制模糊的元素？

svg {
  border: solid 2px black;
  position: absolute;
  top: 0;
  left: 0;
}

.circle {
  fill: blue;
  animation: 
    bounce 5s linear infinite;
}

.mask-rect {
  stroke: black;
  stoke-width: 3px;
   transform-origin: 50% 100%;
  animation-name: spin;
  animation-duration: 8000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes bounce {
  0%, 100% {
    transform: translate(0, 0);
  }
  
  25% {
    transform: translate(200px,200px);
  }
  
  50% {
    transform: translate(0,400px);
  }
  
  75% {
    transform: translate(-200px,200px);
  }
  
  100% {
    transform: translate(0, 0);
  }
}

<!-- Base svg -->
<svg viewBox="0 0 500 500" height="500" width="500">
  <rect x="0" y="0" width="500" height="500" fill="white"  />
  <circle class="circle" cx="250" cy="50" r="30" fill="grey" />
</svg>

<!-- Duplicate masked svg on top -->
<svg viewBox="0 0 500 500" height="500" width="500">
  <defs>
    <filter id="blur" x="0" y="0">
        <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
    </filter>
    <mask id="mask">
      <rect class="mask-rect" x="0" y="250" width="500" height="500" fill="white"  />
    </mask>
  </defs>
  <rect class="mask-rect" x="0" y="250" width="503" height="503" fill="white" />
  <!-- Exactly the same as base svg -->
  <!-- I would rather not dublicate this code -->
  <g mask="url(#mask)" style="filter: url(#blur)">
    <rect x="0" y="0" width="500" height="500" fill="white" />
    <circle class="circle" cx="250" cy="50" r="30" fill="grey" />
  </g>
</svg>

蒙版SVG滤镜

0 个答案: