Чи можу я змінити колір заливки до 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-файлу, ви можете змінити кольорову заливку, змінивши властивість заливки.

<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 не змінюється, я працював над цим, використовуючи transform: scale(...)оператор css для 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 у кутових від 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-сторінка.
--svgcolor = змінна.
span.github = вибір елемента span з класом github, значком svg всередині та призначенням наведення курсору псевдокласу.