В чем может быть причина не прорисовки svg картинок?

Question

[Анастасия Дементьева]

Вставляю svg(jade-pug)

li.mobile-categories__item
    span.mobile-categories__icon
            include ../img/categories/man.svg
    span.mobile-categories__text Волосы – Мужской зал

Некоторые svg не полностью прорисовываются,в чем может быть причина. Код svg, которая не прорисовывается

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.91 16.71"><defs><style>.cls-1{fill:none;stroke:#231f20;stroke-miterlimit:10;}.cls-2{fill:#231f20;}</style></defs><title>manРесурс 1man</title><g id="Слой_2" data-name="Слой 2"><g id="Layer_1" data-name="Layer 1"><ellipse class="cls-1" cx="6.02" cy="10.69" rx="5.5" ry="5.54" transform="translate(-5.8 7.39) rotate(-45)"/><rect class="cls-2" x="8.73" y="3.43" width="8" height="1" transform="translate(0.95 10.15) rotate(-45)"/><path class="cls-2" d="M11.94,0V1h.13a1.82,1.82,0,0,1,.35,0h3.49V5h1V0Z"/></g></g></svg>

Answer 1

[Alex Bond]

Ты уверен что у иконки не прописан overflow:hidden?

Comments

[Анастасия Дементьева]

да

[Alex Bond]

Анастасия Дементьева: ну вот и ответ) просто елемент улетает за границы блока и соотвественно скрывается)
Вариант 1 - убрать оверфлоу
Вариант 2 - пересохранить SVG так чтобы все елменты были внутри бокса.

[Анастасия Дементьева]

Alex Bond: Ты уверен что у иконки не прописан overflow:hidden?-да.Я уверена ,что у иконки не прописан overflow:hidden

Answer 2

[Никита Борзенков]

Удалите лишние теги из кода. Папки и прочее. И не желательно использовать свг с трансформами (transform="translate(-5.8 7.39)rotate(-45)"). Они не везде работают.

Так должно заработать:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.9 16.7"><style>  .cls-1{fill:none;stroke:#231f20;stroke-miterlimit:10;}.cls-2{fill:#231f20;}</style><ellipse class="cls-1" cx="6" cy="10.7" rx="5.5" ry="5.5" transform="translate(-5.8 7.39)rotate(-45)"/><rect class="cls-2" x="8.7" y="3.4" width="8" height="1" transform="translate(0.95 10.15)rotate(-45)"/><path class="cls-2" d="M11.9 0V1h0.1a1.8 1.8 0 0 1 0.4 0h3.5V5h1V0Z"/></svg>