使用自定义 viewBox 时 SVG 过滤器不可见

Question

为什么将 svg viewBox 设置为 0 0 1 1 导致我的过滤器消失？我还尝试使用 x、y、height 和 width 属性以及更改 primitiveUnits 属性，但没有任何效果。任何帮助将不胜感激。

svg {
  border: 1px solid red;
  height: 100px;
  width: 100px;
}

svg circle {
  fill: black;
}

<html>

  <body>
    <svg viewBox="0 0 1 1">
      <defs>
        <filter id="halo1">
          <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
        </filter>
      </defs>
      <circle cx="50%" cy="50%" r="25%" filter="url(#halo1)"></circle>
    </svg>
    
   <svg>
      <defs>
        <filter id="halo2">
          <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
        </filter>
      </defs>
      <circle cx="50%" cy="50%" r="25%" filter="url(#halo2)"></circle>
    </svg>
  </body>

</html>

Fiddle 操场：https://jsfiddle.net/6x34urzg/14/

Answer 1

实际上，在 CSS 中，您知道插入 CSS 到 HTML，如内部 CSS 和内联 CSS。内部 CSS 是你在标签的内部写 css 并且通常用于在 SVG 上提供样式。而内联 CSS 过去常常在标签上的唯一元素上写 css，例如您的程序（编码）。虽然你有 writenn css svg，但你在“Hallo1”上的 svg 消失了，因为你的程序已经内联写入 CSS viewBox="0 0 1 1"让你的 svg "Hallo 1" 消失。此外， viewBox="0 0 1 1" 使您的圆消失，因为 weight=1 和 height=1 这样导致的圆很小，您看不到。要解决该问题，您可以将 viewBox 更改为 'viewBox="0 0 100 100" '

Answer 2

当图像从 1x1 (viewBox="0 0 1 1") 缩放到 100x100 像素时，标准偏差 (stdDeviation="3") 也会缩放。带滤镜的圆圈还在，但大了 100 倍。

如果将标准偏差设置为 1/100 (stdDeviation=".03")，您将获得与其他 SVG 相同的结果。

svg {
  border: 1px solid red;
  height: 100px;
  width: 100px;
}

svg circle {
  fill: black;
}

<html>

  <body>
    <svg viewBox="0 0 1 1">
      <defs>
        <filter id="halo1">
          <feGaussianBlur in="SourceGraphic" stdDeviation=".03" />
        </filter>
      </defs>
      <circle cx="50%" cy="50%" r="25%" filter="url(#halo1)"></circle>
    </svg>
    
   <svg>
      <defs>
        <filter id="halo2">
          <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
        </filter>
      </defs>
      <circle cx="50%" cy="50%" r="25%" filter="url(#halo2)"></circle>
    </svg>
  </body>

</html>

使用自定义 viewBox 时 SVG 过滤器不可见

SVG filter not visible when using custom viewBox

css

svg

svg-filters