blackseabreathe
@blackseabreathe
brackets

Почему некорректно отображаются SVG на странице?

Добавляю на сайт svg через php echo file_get_contents(..path..file...), если добавляю 1-2 svg, то все норм, но стоит добавить больше, то во-первых на некоторых изображениях какого-то фига меняется цвет заливки, во-вторых некоторые элементы одного SVG файла не отображаются.

Например, цвет заливки какого-то элемента был синий, стал коричневый, в другом SVG файле есть человек и планета, так вот планета исчезает, остается только человек.

В коде файла не нашел img, везде Image (где-то в инете читал что должно быть именно Image, а не img) + нашел такой кусок "xlink:href="data:image/png;base64,iVBORw0KGgoAA......" - откуда здесь png? Хотя изображение в целом масштабируется без косяков. Все видно четко при любом его размере.

Что может быть? Косячный SVG или что?

<svg viewBox="0 0 1160 1016" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g filter="url(#filter0_d)">
<path d="M306 802V80H538.45C602.221 80 659.549 94.5458 710.434 123.637C761.318 152.398 800.969 193.226 829.385 246.12C858.131 298.683 872.67 357.692 873 423.148V456.372C873 522.489 858.957 581.83 830.872 634.393C803.116 686.625 763.796 727.618 712.912 757.371C662.358 786.793 605.856 801.669 543.406 802H306ZM479.966 214.383V668.113H540.433C590.326 668.113 628.655 650.426 655.419 615.054C682.183 579.35 695.565 526.457 695.565 456.372V425.132C695.565 355.378 682.183 302.815 655.419 267.442C628.655 232.07 589.665 214.383 538.45 214.383H479.966Z" fill="white"/>
</g>
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="25" width="1339" height="1335">
<path d="M362.323 346.752C162.445 524.45 137.95 823.207 307.612 1014.04C477.273 1204.88 776.843 1215.53 976.721 1037.83C1176.6 860.137 1201.09 561.38 1031.43 370.542C861.771 179.705 562.2 169.053 362.323 346.752Z" fill="url(#paint0_radial)"/>
</mask>
....
</svg>
  • Вопрос задан
  • 2285 просмотров
Решения вопроса 1
sfi0zy
@sfi0zy
Creative frontend developer
если добавляю 1-2 svg, то все норм, но стоит добавить больше, то во-первых на некоторых изображениях какого-то фига меняется цвет заливки, во-вторых некоторые элементы одного SVG файла не отображаются.

Вангую, что в SVG файлах есть id у масок, фильтров и.т.д. Пока SVG находится в вакууме, как отдельная картинка, все ок. Когда вы вставляете SVG-картинки прямо в страницу - все id попадают как бы в "общую область видимости" страницы. А как мы знаем id на странице не должны дублироваться. Ваша магия очень похожа на то, что что-то где-то продублировалось. Так что вам нужно пройтись по всем SVG и сделать везде уникальные id для элементов, чтобы при вставке в страницу не было нигде дублей.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы