SVG исчезает, если применяется фильтр

Я играю с SVG на веб-сайтах, и я пытаюсь заставить filter работать, но я не могу понять, что это правильно.

Проблема в том, что SVG полностью исчезает после применения определенного filter. Я попытался применить встроенную строку filter, чтобы убедиться, что она работает, например:

<symbol id="circle" viewBox="0 0 400 209.603" filter="url('#blur-filter')">
...
</symbol>

но без успеха.

В конечном счете, моя цель состоит в том, что я смогу применить filter через CSS, но я не могу заставить его работать, и это первый раз, когда я действительно играл с SVG s, поэтому я не знаю, допустим ли я какую-то очевидную ошибку.

Код:

.svg-circle:hover {
  filter: url("#blur-filter");
}
.svg-grey {
  fill: #333;
}

<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
  <defs>
    <filter id="blur-filter">
      <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
    </filter>
    <symbol id="circle" viewBox="0 0 400 209.603">
      <circle cx="100" cy="100" r="100" />
    </symbol>
  </defs>
</svg>

<svg>
  <use xlink:href="#circle" class="svg-circle svg-grey"/>
</svg>

Ответ 1

Удалите style="display:none" и добавьте width:0 к первому svg

.svg-circle:hover {
  filter: url("#blur-filter");
}
.svg-grey {
  fill: #333;
}
svg:first-of-type {
  width:0
}

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="blur-filter">
      <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
    </filter>
    <symbol id="circle" viewBox="0 0 400 209.603">
      <circle cx="100" cy="100" r="100" />
    </symbol>
  </defs>
</svg>
<svg>
  <use xlink:href="#circle" class="svg-circle svg-grey"/>
</svg>

Ответ 2

Удалите display: none; в определениях SVG и дайте ему 0 измерений. Это должно сделать это. Как-то фильтр может наследовать, что display: none.

.svg-circle:hover {
  filter: url("#blur-filter");
}
.svg-grey {
  fill: #333;
}

<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
  <defs>
    <filter id="blur-filter">
      <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
    </filter>
    <symbol id="circle" viewBox="0 0 400 209.603">
      <circle cx="100" cy="100" r="100" />
    </symbol>
  </defs>
</svg>

<svg>
  <use xlink:href="#circle" class="svg-circle svg-grey"/>
</svg>

Ответ 3

html, body {
  margin: 0;
  padding: 0;
}

.svg-circle:hover {
  filter: url("#blur-filter");
}

.svg-grey {
  fill: #333;
}

<svg width="0" height="0">
  <defs>
    <filter id="blur-filter">
      <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
    </filter>
    <symbol id="circle" viewBox="0 0 400 209.603">
      <circle cx="100" cy="100" r="100" />
    </symbol>
  </defs>
</svg><svg width="400" height="210">
  <use xlink:href="#circle" class="svg-circle svg-grey"/>
</svg>