Я хочу разместить изображения SVG перед выбранными элементами. Я использую jQuery, но это не имеет значения.
Я хотел бы, чтобы :beforeэлемент был как:
#mydiv:before {
content: '<svg.. code here</svg>';
display: block;
width: 22px;
height: 10px;
margin: 10px 5px 0 10px;
}Если я сделаю это, как показано выше, он просто отобразит строку. Я проверил спецификации и, кажется, есть некоторые ограничения на содержание. Есть ли способ обойти это ограничение? Только содержание css относится к моему вопросу.
Ответы:
Да, ты можешь! Только что проверил, и это прекрасно работает, это потрясающе! Он все еще не работает с HTML, но он работает с SVG.
В моем index.html у меня есть:
И мой test.svg выглядит так:
источник
content: url(path/to/my.svg). Это не обязательно означает, что он будет работать с библиотекой подсказок jQuery UI.content: url(mysprite.svg#my-icon)самом деле не будет тянуть вашу иконку. я хотел бы оказаться неправым, однако :)Да. Вы можете добавить SVG как фоновое изображение пустого: after или: before. Ну вот:
источник
background-sizeне поддерживается в Opera Mini. Это так расстраивает.<?xml version="1.0" encoding="utf-8"?>в начало моего файла SVG, чтобы он работал.убедитесь, что ваш svg не содержит двойных кавычек и uriencode любых символов #.
источник
url('file.svg')работает однако.xmlns='http://www.w3.org/2000/svg'<svg> для работы в Chrome 66.x. Например - маленький шеврон будет:content:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' fill='white'><path d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z' /></svg>");Использование CSS-спрайтов и данных URI дает дополнительные интересные преимущества, такие как быстрая загрузка и меньше запросов, и мы получаем поддержку IE8 с помощью image / base64:
Пример кодепа с использованием SVG
HTML
CSS
Для IE8 измените на это:
источник
scale svgи вы найдете много других способовУдобный инструмент для SVG-кодирования url-encoder
источник
Будьте осторожны, все остальные ответы имеют некоторые проблемы в IE.
Давайте иметь такую ситуацию - кнопка с добавленным значком. Все браузеры обрабатывают это правильно, но IE берет ширину элемента и масштабирует содержимое перед тем, чтобы соответствовать ему. JSFiddle
Решение состоит в том, чтобы установить размер перед элементом и оставить его там, где он есть:
В
background-image+background-sizeрешениях работают хорошо, но немного неудобно, так как вы должны указать те же размеры в два раза.Результат в IE11:
источник
Для продолжения этой темы. Если вы хотите добавить иконки Font Awesome 5, вам нужно добавить немного CSS.
Значки по умолчанию имеют классы
svg-inline--faиfa-w-*.Существуют также классы-модификаторы как
fa-lg,fa-rotate-*и другие. Вам нужно проверитьsvg-with-js.cssфайл и найти подходящий CSS для этого.Вы должны добавить свой собственный цвет к значку css, иначе он будет черным по умолчанию, например,
fill='%23f00'где%23кодируется#.источник
источник