RadCor
@RadCor
Если мой ответ вам помог, отмечайте его решением.

Почему не потягивается изображение вставленное в SVG файл?

Вопрос на засыпку, создаю картинку с SVG маской. Выглядит она так:
b0be2e75adf0405ca1b0c791ae30a342.png
А это код svg файлика:
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve">
<g>
	<defs>
		<polygon id="SVGID_1_" points="330,374 210,317 95,383.4 112.2,251.7 13.4,162.9 144,138.5 198,17.1 261.5,133.8 393.6,147.6 
			302.3,244.1 		"/>
	</defs>
	<clipPath id="SVGID_2_">
		<use xlink:href="#SVGID_1_"  overflow="visible"/>
	</clipPath>
	<image overflow="visible" clip-path="url(#SVGID_2_)" width="400" height="400" xlink:href="01.jpg" >
	</image>
</g>
</svg>


Вот в чём вопрос, почему если вставлять svg код напрямую в html, то обычная jpg картинка подтягивается и на неё наноситься SVG маск в виде звезды.
И живой пример: https://jsfiddle.net/uj6tcuyc/3/

Но если вставлять SVG код в тег img, то почему-то jpg картинка которая внутри не хочет потягиваться
Пример: https://jsfiddle.net/uj6tcuyc/4/

При этом если перейти по прямой ссылке на svg картинку, мы видим что в нутри jpg картинка нормально подтягивается.
Прямая ссылка: d3.qsb.su/01.svg

Так в чём же загвоздка? Почему не получается отобразит svg через тег img?
  • Вопрос задан
  • 506 просмотров
Решения вопроса 1
Lynn
@Lynn
nginx, js, css
Это защита браузеров https://developer.mozilla.org/en-US/docs/Web/SVG/S...

Ограничения
В целях безопасности, Gecko ограничивает некоторые возможности SVG когда он используется как картинка:

* Отключен JavaScript;
* Не загружаются внешние ресурсы (например картинки, стили), хотя их можно использовать, если добавить в виде data: URI
* […]
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
nickolyashka
@nickolyashka
скорей всего нужно добавить vivebox, оставлю ссылку тут
Ответ написан
Ваш ответ на вопрос

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

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