Как создать SVG с помощью внешнего CSS?

У меня есть несколько графических файлов SVG, которые я хотел бы изменить цвета через мои внешние таблицы стилей - не напрямую в каждом SVG файле. Я не помещаю графику в строку, но сохраняю ее в папке с изображениями и указывая на них.

Я реализовал их таким образом, чтобы всплывающие подсказки работали, и я также обернул их в тег <a>, чтобы разрешить ссылку.

<a href='http://youtube.com/...' target='_blank'><img class='socIcon' src='images/socYouTube.svg' title='View my videos on YouTube' alt='YouTube' /></a>

И вот код SVG-графика:

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="stylesheets/main.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">
<g>
    <path d="M28.44......./>
</g>
</svg>

Я поместил следующее в мой внешний файл CSS (main.css):

.socIcon g {fill:red;}

Однако это не влияет на графику. Я также пробовал путь .socIcon g path {} и .socIcon {}.

Что-то не так, возможно, моя реализация не разрешает внешние модификации CSS, или я пропустил шаг? Я бы очень признателен за вашу помощь! Мне просто нужно изменить цвета изображения SVG через мою внешнюю таблицу стилей, но я не могу потерять подсказку и способность ссылок. (Я могу жить без подсказок.) Спасибо!

Ответы

Ответ 1

Ваш файл main.css будет влиять только на содержимое SVG, если SVG файл включен в HTML:

https://developer.mozilla.org/en/docs/SVG_In_HTML_Introduction

<html>
  <body>
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">
    <g>
      <path d="M28.44......./>
    </g>
  </svg>
</html>

Если вы хотите сохранить SVG в файлах, CSS необходимо определить внутри SVG файла.

Вы можете сделать это с помощью тега стиля:

http://www.w3.org/TR/SVG/styling.html#StyleElementExample

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     width="50px" height="50px" viewBox="0 0 50 50">
  <defs>
    <style type="text/css"><![CDATA[
      .socIcon g {
        fill:red;
      }
    ]]></style>
  </defs>
  <g>
    <path d="M28.44......./>
  </g>
</svg>

Вы можете использовать инструмент на стороне сервера для обновления тега стиля в зависимости от активного стиля. В рубине вы могли добиться этого с Нокогири. SVG - это просто XML. Таким образом, возможно, существует много доступных XML-библиотек, которые, возможно, достигнут этого.

Если вы не можете этого сделать, вам придется просто использовать их, как если бы они были PNG; создавая набор для каждого стиля и сохраняя их встроенные стили.

Ответ 2

Вы можете делать то, что хотите, с одним (важным) предупреждением: пути внутри вашего символа не могут быть созданы независимо через внешний CSS - вы можете только установить свойства для всего символа с помощью этого метода. Итак, если у вас есть два пути в вашем символе и хотите, чтобы у них были разные цвета заливки, это не сработает, но если вы хотите, чтобы все ваши пути были одинаковыми, это должно работать.

В вашем html файле вы хотите что-то вроде этого:

<style>
  .fill-red { fill: red; }
  .fill-blue { fill: blue; }
</style>

<a href="//www.example.com/">
  <svg class="fill-red">
    <use xlink:href="images/icons.svg#example"></use>
  </svg>
</a>

А во внешнем SVG файле вы хотите что-то вроде этого:

<svg xmlns="http://www.w3.org/2000/svg">
   <symbol id="example" viewBox="0 0 256 256">
    <path d="M120.... />
  </symbol>
</svg>

Смените класс на теге svg (в вашем html) с fill-red до fill-blue и ta-da... у вас есть синий, а не красный.

Вы можете частично ограничить ограничение возможности маршрутизировать пути отдельно с помощью внешнего CSS, смешивая и сопоставляя внешний CSS с некоторым встроенным CSS на определенных путях, поскольку встроенный CSS будет иметь приоритет. Такой подход будет работать, если вы делаете что-то вроде белого значка на цветном фоне, где вы хотите изменить цвет фона через внешний CSS, но сам значок всегда белый (или наоборот). Итак, с тем же HTML, что и раньше, и что-то вроде этого кода svg, вы получите красный фон и белый передний план:

<svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="example" viewBox="0 0 256 256">
    <path class="background" d="M120..." />
    <path class="icon" style="fill: white;" d="M20..." />
  </symbol>
</svg>

Ответ 3

Можно создать стиль SVG, динамически создав элемент стиля в JavaScript и добавив его в элемент SVG. Хакки, но он работает.

<object id="dynamic-svg" type="image/svg+xml" data="your-svg.svg">
    Your browser does not support SVG
</object>
<script>
    var svgHolder = document.querySelector('object#dynamic-svg');
    svgHolder.onload = function () {
        var svgDocument = svgHolder.contentDocument;
        var style = svgDocument.createElementNS("http://www.w3.org/2000/svg", "style");

        // Now (ab)use the @import directive to load make the browser load our css
        style.textContent = '@import url("/css/your-dynamic-css.css");';

        var svgElem = svgDocument.querySelector('svg');
        svgElem.insertBefore(style, svgElem.firstChild);
    };
</script>

Вы можете генерировать JavaScript динамически на PHP, если хотите - тот факт, что это возможно в JavaScript, открывает множество возможностей.

Ответ 4

Один из подходов, который вы можете использовать, - это просто использовать фильтры CSS, чтобы изменить внешний вид графики SVG в браузере.

Например, если у вас есть SVG-графический файл, который использует красный цвет заливки в SVG-коде, вы можете включить его фиолетовым с настройкой поворота оттенка на 180 градусов:

#theIdOfTheImgTagWithTheSVGInIt {
    filter: hue-rotate(180deg);
    -webkit-filter: hue-rotate(180deg);
    -moz-filter: hue-rotate(180deg);
    -o-filter: hue-rotate(180deg);
    -ms-filter: hue-rotate(180deg);
}

Экспериментируйте с другими настройками поворота, чтобы найти нужные цвета.

Чтобы быть ясным, приведенный выше CSS идет в CSS, который применяется к вашему HTML-документу. Вы создаете тег img в HTML-коде, не устраивая код SVG.

И обратите внимание, что это не будет работать с графикой, заполненной черным или белым или серым. У вас должен быть фактический цвет, чтобы повернуть оттенок этого цвета.

Ответ 5

Это можно сделать, предварительно вставив внешние изображения svg. Посмотрите здесь, например:

Заменить все изображения Svg с помощью Inline Svg | JAVASCRIPT | Библиотека фрагмента кода Джесс Фразель

Ответ 6

При использовании в теге <image> SVG должен содержаться в одном файле по соображениям конфиденциальности. Эта ошибка bugzilla содержит более подробную информацию о том, почему это так. К сожалению, вы не можете использовать другой тег, например <iframe>, потому что это не будет работать как ссылка, поэтому вам нужно будет встроить CSS в тег <style> внутри самого файла.

Другим способом сделать это будет наличие SVG-данных в главном html файле i.e.

<a href='http://youtube.com/...' target='_blank'>
  <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">
    <g>
        <path d="M28.44......./>
    </g>
  </svg>
</a>

Вы можете создать стиль с помощью внешнего файла CSS, используя тег HTML <link>.

Ответ 7

"Я собираюсь изменить цвета этих изображений на основе той цветовой схемы, которую пользователь выбрал для моего сайта". - Jordan 10 часов назад

Я предлагаю вам использовать PHP для этого. Там действительно нет лучшего способа сделать это без знаковых шрифтов, и если вы не используете их, вы можете попробовать следующее:

<?php

    header('Content-Type: image/svg+xml');
    echo '<?xml version="1.0" encoding="utf-8"?>';
    $color = $_GET['color'];

?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">
    <g>
        <path fill="<?php echo $color; ?>" d="M28.44..."/>
    </g>
</svg>

И позже вы можете использовать этот файл как filename.php?color=#ffffff, чтобы получить файл svg в желаемом цвете.

Ответ 8

Очень быстрое решение иметь динамический стиль с внешней таблицей стилей CSS, если вы используете тег <object> для встраивания своего svg.

Этот пример добавит класс в корневой тег <svg> при щелчке по родительскому элементу.

file.svg:

<?xml-stylesheet type="text/css" href="../svg.css"?>
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="">
  <g>
   <path/>
  </g>
 </svg>

html:

<a class="parent">
  <object data="file.svg"></object>
</a>

JQuery:

$(function() {
  $(document).on('click', '.parent', function(){
    $(this).find('object').contents().find('svg').attr("class","selected");
  }
});

на родительском элементе click:

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="" class="selected">

тогда вы можете управлять своим css

svg.css:

path {
 fill:none;
 stroke:#000;
 stroke-miterlimit:1.41;
 stroke-width:0.7px;
}

.selected path {
 fill:none;
 stroke:rgb(64, 136, 209);
 stroke-miterlimit:1.41;
 stroke-width:0.7px;
}

Ответ 9

Я знаю его старый пост, но просто для устранения этой проблемы... вы просто используете свои классы не в том месте: D

Прежде всего, вы можете использовать

svg { fill: red; }

в вашем main.css чтобы получить его красным. Это имеет эффект. Вы также можете использовать селектора узлов, чтобы получить конкретные шаблоны.

Во-вторых, вы объявили класс в img -Tag.

<img class='socIcon'....

Вы действительно должны объявить его в своем SVG. если у вас есть разные пути, вы могли бы определить больше, конечно.

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="stylesheets/main.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">
<g>
    <path class="myClassForMyPath" d="M28.44......./>
</g>
</svg>

теперь вы можете изменить цвет в своем main.css как

.myClassForMyPath {
    fill: yellow;
}

Ответ 10

Что работает для меня: тег стиля с правилом @import

<defs>
    <style type="text/css">
        @import url("svg-common.css");
    </style>
</defs>

Ответ 11

Для внешних стилей

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">

  <style>
	@import url(main.css);
  </style>

  <g>
    <path d="M28.44......./>
  </g>
</svg>

Ответ 12

@leo вот версия angularJS, еще раз спасибо

G.directive ( 'imgInlineSvg', function () {

return {
    restrict : 'C',
    scope : true,
    link : function ( scope, elem, attrs ) {

        if ( attrs.src ) {

            $ ( attrs ).each ( function () {
                var imgID    = attrs.class;
                var imgClass = attrs.class;
                var imgURL   = attrs.src;

                $.get ( imgURL, function ( data ) {

                    var $svg = $ ( data ).find ( 'svg' );
                    if ( typeof imgID !== 'undefined' ) {
                        $svg = $svg.attr ( 'id', imgID );
                    }

                    if ( typeof imgClass !== 'undefined' ) {
                        $svg = $svg.attr ( 'class', imgClass + ' replaced-svg' );
                    }

                    $svg = $svg.removeAttr ( 'xmlns:a' );

                    elem.replaceWith ( $svg );

                } );

            } );
        }

    }

}

} );

Ответ 13

Этот метод будет работать, если svg будет просмотрен в веб-браузере, но как только этот код будет загружен в раздел, а класс для значка svg будет закодирован, как если бы это было фоновое изображение, цвет был потерян и вернулся к цвету по умолчанию, Похоже, что цвет не может быть изменен из внешней таблицы стилей, хотя оба класса svg для цвета и класс верхнего уровня для отображения и положения svg оба отображаются в один и тот же каталог.