SVG filter not visible when using custom viewBox-CodePudding

Why is setting an svg viewBox to say 0 0 1 1 causing my filter to disappear? I also tried playing around with x, y, height, and width attributes as well as changing primitiveUnits attribute, nothing did work. Any help would be appreciated.

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 playground: https://jsfiddle.net/6x34urzg/14/

CodePudding user response：

It's not disappearing, it's just scaled down to a really small shape due to viewBox 0 0 1 1

The measure of SVG grid is in pixels, but with viewBox attr, you define your own unit

In your eg:

<svg viewBox="0 0 1 1"> // width and height = 100px from your CSS

That means the scale(scale down) of the shape us very small which is why you can't see it. once you start increasing the scale with your viewBox like 0 0 10 10 or 0 0 100 100, the shapes will scale and show.

If you don't specify viewBox, it will take your default 100px x 100px CSS

CodePudding user response：

Actually, in the CSS you know insert CSS to HTML like Internal CSS and Inline CSS. Internal CSS is you write css on in inside on tag and that tend general for use to give style on SVG. While, Inline CSS used to write css on unique element on tags like your program(coding). Although you have writenn css svg, your svg on "Hallo1" disappear because your program have write inline CSS viewBox="0 0 1 1"make your svg "Halo 1" disappear. Moreover, viewBox="0 0 1 1" make your circle dissapear because weight=1 and height=1 so that cirle which resulted so small and you cannot see that. To solve that problem you can change your viewBox become 'viewBox="0 0 100 100" '