Заполнение шаблона изображения svg не рендерится в html
У меня есть изображение SVG, созданное элементами пути, и элементы пути находятся внутри тегов g, которые преобразуют и применяют заливку к элементам пути. Заполнение, которое я использовал, было шаблоном, который был предопределен в теге defs. Элемент pattern содержит теги изображений, которые ссылаются на oth
Теперь проблема: когда я поместил код SVG непосредственно в HTML, он работал нормально; но изображение должно быть гибким для изменения размера, поэтому оно должно быть в тегах img. К сожалению, когда я связываю svg внешне, заливка на элементах path становится прозрачной. Я думаю, что проблема заключается в том, что изображение не отображается, потому что, когда я заменяю заливку простым шестнадцатеричным цветом, он работает нормально.
Вот svg:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="232" height="158">
<defs>
<filter id="contrast">
<feComponentTransfer>
<feFuncR type="linear" slope="25" intercept="-(0.5 * 25) + 0.5"></feFuncR>
<feFuncG type="linear" slope="25" intercept="-(0.5 * 25) + 0.5"></feFuncG>
<feFuncB type="linear" slope="100" intercept="-(0.5 * 100) + 0.5"></feFuncB>
</feComponentTransfer>
</filter>
<pattern id="bg1" patternUnits="userSpaceOnUse" width="1000" height="3000">
<image xlink:href="svg_bg.png" x="0" y="-25" width="2200" height="1800" style="filter: url(#contrast);"></image>
</pattern>
</defs>
<g transform="scale(0.5,0.5)" stroke="none" fill="url(#bg1)">
<path d="M150 0 L75 200 L225 200 Z" />
</g>
</svg>
2 ответа
Когда используется в контексте изображения, то есть через <img> Фоновое изображение tag или css SVG-файлы должны быть в одном файле для защиты конфиденциальности пользователя.
Вам нужно внедрить файл svg_bg.png в файл SVG в качестве URL-адреса данных, чтобы это работало.
Вы должны проверить числа в координатах x а также y везде и href к svb_bg.png,
Демо для вас код: http://jsbin.com/diwoduheze/1/