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

Ответ 1

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

​path {
    fill: blue;
}​

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

Ответ 2

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

path:hover{
  fill:red;
}

Ответ 3

Если вы перейдете в исходный код 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 и поиграйте с ним.

Ответ 4

вы помещаете этот css для круга SVG.

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

Ответ 5

Я наткнулся на удивительный ресурс по 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" ?>

Ответ 6

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