Обеспечить фильтр SVG без фактического элемента SVG

Question

У меня есть svg только для обеспечения фильтра для img:

<svg>
    <filter id="makewhite">
        <feColorMatrix type="matrix" values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0" />
    </filter>
</svg>

<img src="icon.svg" style="filter:url(#makewhite)">

Этот SVG без содержания по-прежнему имеет размер и отодвигает мой контент в сторону:

Есть ли лучший способ предоставить фильтр для SVG img?

Answer 1

Избегайте display: none как правило.Это влияет на рендеринг некоторых элементов, поэтому мы обычно не рекомендуем.

Вы можете просто использовать width="0" height="0".

Если хотите, вы также можете добавить style="position: absolute;" или "opacity: 0" если хотите, но они не должны быть необходимыми.