Как изменить цвет заливки SVG с помощью внешнего CSS [duplicate]

Вы можете делать то, что хотите, с одним (важным) предупреждением: пути внутри вашего символа не могут быть созданы независимо через внешний 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>

«Я действительно собираюсь изменить цвета этих изображений на основе той цветовой схемы, которую пользователь выбрал для моего сайта». - 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 в желаемом цвете.

Я знаю его старое сообщение, но просто для устранения этой проблемы ... вы просто используете свои классы не в том месте: 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;
}

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

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

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

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

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

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

<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, открывает множество возможностей.

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

Еще один способ сделать это - иметь SVG-данные в основном файле html, т. Е.

<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>.

Один из подходов, который вы можете предпринять, - это просто использовать фильтры 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.

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

Очень быстрое решение для динамического стиля с внешней таблицей стилей 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;
}