Почему SVG, содержащий xlink:href, не отображается как background?
Нарисовал svg по просьбе, как inline работает хорошо но не отображается если подключить его в css как background....
Переделал кучу раз ..
<svg viewBox="0 0 1200 600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<mask id="mask">
<rect width="100%" height="100%" fill="#000" />
<path d="M0,0 300,0 C300,0 600,300 900,0 L1200,0 1200,600 C1200,600 600,500 0,600z" fill="#fff" />
</mask>
</defs>
<image xlink:href="https://i.ytimg.com/vi/vqvUC-1pNvo/maxresdefault.jpg" width="1200px" height="600px" x="0" y="0" preserveAspectRatio="none" mask="url(#mask)" />
</svg>Почему документ может не работать в css как фон ? Что надо сделать что бы заработал ?
Ответы (1 шт):
В спецификации SVG Integration (хоть и черновик, но в браузерах, похоже, давно реализовано) указано, что при использовании SVG-файла в HTML-теге <img> или CSS-свойствах (в том числе background) этот SVG-файл интерпретируется как «animated image document», и для такого вида интеграции должен применяться «secure animated processing mode», который запрещает не только выполнение скриптов, но и ссылки на любые внешние ресурсы. Поэтому не судьба.
Если отказаться от ссылок и встроить картинку прямо в SVG с помощью Data URI (data:image/jpeg;base64,/9j/4AAQSk...), то она отобразится. (Впрочем, это сомнительное решение...)