Могу ли я изменить цвет заливки пути SVG с помощью CSS?

У меня есть следующий код:

  <span>
     <svg height="32" version="1.1" width="32" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.0166626px; top: -0.983337px;">
        <desc></desc>
        <defs/>
        <path style="" fill="#333333" stroke="none" d="M15.985,5.972C8.422,5.972,2.289999999999999,10.049,2.289999999999999,15.078C2.289999999999999,17.955,4.302999999999999...............1,27.68,22.274Z"/>
      </svg>&nbsp;
  </span>

Можно ли изменить цвет заливки пути SVG с помощью CSS или каким-либо другим способом, фактически не меняя его внутри тега пути?

Да, вы можете применить CSS к SVG, но вам нужно сопоставить элемент, как при стилизации HTML. Если вы просто хотите применить его ко всем путям SVG, вы можете использовать, например:

​path {
    fill: blue;
}​

Внешний CSS, кажется, переопределяет fillатрибут пути , по крайней мере, в браузерах на основе WebKit и Gecko, которые я тестировал. Конечно, если вы напишите, скажем, <path style="fill: green">тогда это переопределит и внешний CSS.

если вы хотите изменить цвет, наведя курсор на элемент, попробуйте это:

path:hover{
  fill:red;
}

Если вы войдете в исходный код файла SVG, вы можете изменить цвет заливки, изменив свойство fill.

<svg fill="#3F6078" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
</svg> 

Используйте ваш любимый текстовый редактор, откройте файл SVG и поиграйте с ним.

Вы положили этот CSS для круга SVG.

svg:hover circle{
    fill: #F6831D;
    stroke-dashoffset: 0;
    stroke-dasharray: 700;
    stroke-width: 2;
}

Я наткнулся на удивительный ресурс по css-трюкам: https://css-tricks.com/using-svg/

Там есть несколько решений, объясненных там.

Я предпочел тот, который требовал минимального редактирования исходного svg, а также не требовал, чтобы он был встроен в HTML-документ. Эта опция использует <object>тег.

Добавьте файл SVG в ваш HTML, используя <object>; Я также объявил атрибуты HTML widthи height. Используя эти ширину и высоту, документ svg не масштабируется, я работал над этим, используя оператор css transform: scale(...)для svgтега в моем связанном файле svg css.

<object type="image/svg+xml" data="myfile.svg" width="64" height="64"></object>

Создайте файл CSS, чтобы прикрепить его к документу SVN. Мой исходный путь SVG был масштабирован до 16 пикселей, я увеличил его до 64 с коэффициентом четыре. У него был только один путь, поэтому мне не нужно было выбирать его более конкретно, однако путь имел атрибут fill, поэтому мне пришлось использовать его, !IMPORTANTчтобы заставить css создать прецедент.

#svg2 {
    width: 64px; height: 64px;
    transform: scale(4);
}
path {
    fill: #333 !IMPORTANT;
}

Отредактируйте целевой файл SVG перед открывающим <svgтегом, чтобы включить таблицу стилей; Обратите внимание, что href относится к URL-адресу файла svg.

<?xml-stylesheet type="text/css" href="myfile.css" ?>

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

icon.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<!-- use symbol instead of defs and g, 
  must add viewBox on symbol just copy yhe viewbox from the svg tag itself
  must add id on symbol
-->
<symbol id="location" viewBox="0 0 430.114 430.114">
  <!-- add all the icon's paths and shapes here -->
  <path d="M356.208,107.051c-1.531-5.738-4.64-11.852-6.94-17.205C321.746,23.704,261.611,0,213.055,0   C148.054,0,76.463,43.586,66.905,133.427v18.355c0,0.766,0.264,7.647,0.639,11.089c5.358,42.816,39.143,88.32,64.375,131.136   c27.146,45.873,55.314,90.999,83.221,136.106c17.208-29.436,34.354-59.259,51.17-87.933c4.583-8.415,9.903-16.825,14.491-24.857   c3.058-5.348,8.9-10.696,11.569-15.672c27.145-49.699,70.838-99.782,70.838-149.104v-20.262   C363.209,126.938,356.581,108.204,356.208,107.051z M214.245,199.193c-19.107,0-40.021-9.554-50.344-35.939   c-1.538-4.2-1.414-12.617-1.414-13.388v-11.852c0-33.636,28.56-48.932,53.406-48.932c30.588,0,54.245,24.472,54.245,55.06   C270.138,174.729,244.833,199.193,214.245,199.193z"/>
</symbol>

icon.html

<svg><use xlink:href="file_path/location.svg#location"></use></svg>

Можно изменить цвет заливки пути svg. Ниже приведен фрагмент кода CSS:

1. Чтобы применить цвет для всего пути: svg > path{ fill: red }

2. Чтобы подать заявку на первый путь d: svg > path:nth-of-type(1){ fill: green }

3. Чтобы подать заявку на второй путь d: svg > path:nth-of-type(2){ fill: green}

4. Чтобы подать заявку на другой путь d, измените только номер пути:
   svg > path:nth-of-type(${path_number}){ fill: green}

5. Для поддержки CSS в Angular 2-8 используйте концепцию инкапсуляции:

:host::ng-deep svg path:nth-of-type(1){
        fill:red;
    }

Вставьте все ваши svg:

fill="var(--svgcolor)"

В Css:

:root {
  --svgcolor: tomato;
}

Чтобы использовать псевдоклассы:

span.github:hover {
  --svgcolor:aquamarine;
}

объяснение

root = html page.
--svgcolor = переменная.
span.github = выбор элемента span с классом github, значком svg внутри и назначение наведения псевдокласса.