Внедрение SVG в CSS с использованием ссылки

Я пытаюсь повторно использовать встроенный SVG с помощью автоматически созданного элемента в CSS, но он не работает должным образом.Внедрение SVG в CSS с использованием ссылки

Это SVG:

<svg><use xlink:href="#arrow"/></svg>

И после того, как кодирование base64 его в этот CSS:

#icon:after { 
    content: ''; 
    display: block; 
    width: 100px; 
    height: 100px; 
    border: 1px solid #000; 
    background-image: url(data:image/svg+xml;base64,PHN2Zz48dXNlIHhsaW5rOmhyZWY9IiNhcnJvdyIvPjwvc3ZnPg==); 
}

Он не может вывести SVG

Вот more complete codepen.

источник

2015-10-19 Tibor Szasz

Не URL-адрес данных должен быть внестраничным? –

Если вы открываете картинку в браузере, вы получите следующий результат: ошибка в строке 1 в столбце 30: Префикс пространства имен xlink для использования href при использовании не определен – KittMedia

Да, потому что это ссылка, она должна сломаться. Строка, закодированная base64, также является ссылкой. –

Когда SVG используется в контексте изображения, будь то через <img> или в этом случае с помощью фонового изображения CSS он должен быть заполнен в одном документе. Ссылки за пределами документа запрещены.

Таким образом, #arrow должен указывать на элемент с стрелкой id в этом документе, закодированном в формате base64 SVG.

источник

2015-10-19 14:49:47

Внедрение SVG в CSS с использованием ссылки

ответ

Смежные вопросы