Это самостоятельные вопросы и ответы о полезном куске кода, который я придумал.
В настоящее время нет простого способа внедрить изображение SVG, а затем получить доступ к элементам SVG через CSS. Существуют различные способы использования каркасов JS SVG, но они слишком сложны, если все, что вы делаете, - это создание простого значка с состоянием опрокидывания.
Итак, вот что я придумала, и я думаю, что это самый простой способ использовать файлы SVG на веб-сайте. Он берет свое понятие из ранних методов замены текста в изображение, но, насколько мне известно, никогда не было сделано для SVG.
Это вопрос:
Ответы:
Во-первых, используйте тег IMG в своем HTML для встраивания SVG-графики. Я использовал Adobe Illustrator для создания графики.
Это так же, как вы бы встраивали нормальное изображение. Обратите внимание, что вам нужно настроить IMG на наличие класса svg. Класс 'social-link' только для примера. Идентификатор не обязателен, но полезен.
Затем используйте этот код jQuery (в отдельном файле или в заголовке в заголовке).
Вышеприведенный код выполняет поиск всех IMG с классом 'svg' и заменяет его на встроенный SVG из связанного файла. Огромное преимущество заключается в том, что теперь вы можете использовать CSS для изменения цвета SVG, например:
Код jQuery, который я написал, также переносится через исходный идентификатор изображения и классы. Так что этот CSS тоже работает:
Или:
Вы можете увидеть пример его работы здесь: http://labs.funkhausdesign.com/examples/img-svg/img-to-svg.html
У нас есть более сложная версия, которая включает кеширование здесь: https://github.com/funkhaus/style-guide/blob/master/template/js/site.js#L32-L90
источник
});
$ .get на}, 'xml');
img[src$=".svg"]
и исключить необходимость вsvg
классе.$('#ico_company path').removeAttr('fill')
, Тогда вы могли бы сделать#ico_company { fill: #ccc }
в своем файле CSSСтиль
скрипт
источник
width="170.667"
в моем случаеpath
(напримерrect
), вам нужно будет обрабатывать их также в cssТеперь вы можете использовать свойство CSS
filter
в большинстве современных браузеров (включая Edge, но не IE11). Он работает с изображениями SVG и другими элементами. Вы можете использоватьhue-rotate
илиinvert
для изменения цветов, хотя они не позволяют вам изменять разные цвета независимо друг от друга. Я использую следующий класс CSS, чтобы показать «отключенную» версию иконки (где оригинал представляет собой изображение SVG с насыщенным цветом):Это делает его светло-серым в большинстве браузеров. В IE (и, возможно, Opera Mini, который я не тестировал) он заметно исчезает благодаря свойству opacity, которое все еще выглядит довольно хорошо, хотя и не серым.
Вот пример с четырьмя различными классами CSS для значка колокольчика Twemoji : оригинальный (желтый), вышеупомянутый «отключенный» класс,
hue-rotate
(зеленый) иinvert
(синий).Показать фрагмент кода
источник
if ($('.w3-top img').css("color") == "rgb(0, 0, 0)") { $('.w3-top img').css("filter", "invert(100%)"); $('.w3-top img').css("-webkit-filter", "invert(100%)"); };
В качестве альтернативы вы можете использовать CSS
mask
, если поддержка браузера не очень хорошая, но вы можете использовать запасной вариантисточник
-webkit-mask
не следует использовать на любом производственном веб-сайте.Если вы можете включить файлы (включая PHP или включить через CMS) на свою страницу, вы можете добавить код SVG и включить его на свою страницу. Это работает так же, как вставка исходного кода SVG на страницу, но делает разметку страницы более чистой.
Преимущество заключается в том, что вы можете нацеливать части SVG с помощью CSS для наведения - никакой JavaScript не требуется.
http://codepen.io/chriscoyier/pen/evcBu
Вам просто нужно использовать правило CSS, как это:
Обратите внимание, что этот
!important
бит необходим для переопределения цвета заливки.источник
<div ng-include="'svg.svg'"></div>
#pathidorclass:hover, .wrapperclass:hover #pathidorclass { fill: green; }
Или даже просто удалите исходное наведение SVG-пути, поскольку вы все равно нацеливаетесь на него через элемент-обертку.@Drew Baker дал отличное решение для решения проблемы. Код работает правильно. Тем не менее, те, кто использует AngularJ, могут найти много зависимости от jQuery. Следовательно, я подумал, что это хорошая идея - вставить для пользователей AngularJS код, соответствующий решению @Drew Baker.
AngularJs способ того же кода
1. HTML : используйте тег ниже в вашем HTML-файле:
2. Директива : это будет директива, которая вам понадобится для распознавания тега:
3. CSS :
4. Юнит-тест с карма-жасмином :
источник
<div ng-include="/icons/my.svg" class="any-class-you-wish"></div>
ng-include
просто измените эту строкуvar imgURL = element.attr('src');
наvar imgURL = element.attr('ng-include');
if (typeof(imgClass) !== 'undefined') { $svg.setAttribute("class", imgClass); }
вместо split и for loop.angular.element(data)[0];
) и заставить его работать с использованием IEif ($svg.getAttribute('class')) { $svg.setAttribute('class', $svg.getAttribute('class') + ' ' + imgClass); } else { $svg.setAttribute('class', imgClass); }
. Также вы можете захотеть добавитьcache: true
к параметрам,$http.get
иначе ваша страница может стать очень медленной.Я понимаю, что вы хотите сделать это с помощью CSS, но просто напоминание, если это маленькое простое изображение - вы всегда можете открыть его в Notepad ++ и изменить заполнение пути / whateverelement:
Это может спасти тонну ужасного сценария. Извините, если это не основа, но иногда простые решения могут быть пропущены.
... даже обмен нескольких изображений SVG может быть меньше по размеру, чем некоторые фрагменты кода для этого вопроса.
источник
Я написал директиву для решения этой проблемы с AngularJS. Это доступно здесь - ngReusableSvg .
Он заменяет элемент SVG после его рендеринга и помещает его в
div
элемент, что делает его CSS легко изменяемым. Это помогает использовать один и тот же файл SVG в разных местах, используя разные размеры / цвета.Использование простое:
После этого вы можете легко получить:
источник
TL / DR: GO здесь-> https://codepen.io/sosuke/pen/Pjoqqp
Объяснение:
Я предполагаю, что у вас есть что-то вроде HTML:
Обязательно пройдите фильтр маршрута, т.е. Ваш SVG, скорее всего, черный или белый. Вы можете применить фильтр, чтобы получить тот цвет, который вы хотите, например, у меня есть черный svg, который я хочу, мятно-зеленый. Сначала я инвертирую его в белый цвет (формально это все цвета RGB на полную), затем играю с насыщенностью оттенка и т. Д. Чтобы сделать это правильно:
Еще лучше то, что вы можете просто использовать инструмент для преобразования нужного вам гекса в фильтр для вас: https://codepen.io/sosuke/pen/Pjoqqp
источник
Вот версия для
knockout.js
основанного на принятом ответе:Важно: на самом деле для замены требуется также jQuery, но я подумал, что это может быть полезно для некоторых.
Тогда просто примените
data-bind="svgConvert: true"
к вашему тегу img.Это решение полностью заменяет
img
тег SVG, и любые дополнительные привязки не будут соблюдаться.источник
get
будет запрашивать его снова. Я считал , изменяяsrc
кdata-src
атрибуту поimg
тегу, но пришел к выводу , что современные браузеры, вероятно , достаточно умны , чтобы кэшировать файл в любом случаеВот код без фреймворка, только чистый js:
источник
Существует библиотека с открытым исходным кодом SVGInject, которая использует
onload
атрибут для запуска внедрения. Вы можете найти проект GitHub по адресу https://github.com/iconfu/svg-inject.Вот минимальный пример использования SVGInject:
После загрузки изображения
onload="SVGInject(this)
будет инициировано внедрение, и<img>
элемент будет заменен содержимым файла SVG, предоставленного вsrc
атрибуте.Это решает несколько проблем с инъекцией SVG:
SVG могут быть скрыты до завершения инъекции. Это важно, если стиль уже применяется во время загрузки, что в противном случае могло бы вызвать краткую «флэш-память без стиля».
Эти
<img>
элементы INJECT themselved автоматически. Если вы добавляете SVG динамически, вам не нужно беспокоиться о повторном вызове функции инъекции.Случайная строка добавляется к каждому идентификатору в SVG, чтобы избежать многократного использования одного и того же идентификатора в документе, если SVG вводится более одного раза.
SVGInject представляет собой простой Javascript и работает со всеми браузерами, поддерживающими SVG.
Отказ от ответственности: я соавтор SVGInject
источник
Если у нас будет больше таких изображений SVG, мы также можем воспользоваться шрифтовыми файлами.
Такие сайты, как https://glyphter.com/, могут получить нам файл шрифта из наших svgs.
Например
источник
Вы можете использовать data-image для этого. используя data-image (data-URI), вы можете получить доступ к SVG, как встроенный.
Вот эффект ролловера с использованием чистого CSS и SVG.
Я знаю это грязно, но вы можете сделать это так.
Вы можете конвертировать ваш SVG в URL-адрес данных здесь
источник
Поскольку SVG - это в основном код, вам нужно просто содержимое. Я использовал PHP для получения контента, но вы можете использовать все, что захотите.
Затем я напечатал содержимое "как есть" внутри контейнера div
Чтобы окончательно установить правило для SVG-потомков контейнера на CSS
Я получил этот результат с иконкой материала SVG:
источник
Выбранное решение подойдет, если вы хотите, чтобы jQuery обрабатывал все элементы svg в вашем DOM, и ваш DOM имеет разумный размер. Но если у вас большой DOM, и вы решили загружать части DOM динамически, нет смысла пересматривать весь DOM только для обновления элементов svg. Вместо этого используйте плагин jQuery, чтобы сделать это:
В вашем html укажите элемент svg следующим образом:
И примените плагин:
источник
для анимации событий при наведении мыши мы можем оставить стили внутри файла SVG, как
проверить это на svgshare
источник