Как наследовать цвет обводки в SVG? (Не заливка, а цвет обводки) - PullRequest
Новая
       71

Как наследовать цвет обводки в SVG? (Не заливка, а цвет обводки)

2 голосов
/ 08 июля 2019

У меня есть .SVG, где я звоню с <img src="/image/arrow.svg" alt="Arrow">.Все хорошо, но я хотел бы динамически установить другой цвет обводки (Не цвет заливки ...) для моего SVG, например <img ... style="color:red">.Я прочитал, что могу использовать fill = "currentColor" на моем пути, но как я могу сделать для моего цвета обводки?

Мой SVG-файл: 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" height="100" width="100">
    <path d="M20 10 H90 V80" fill="transparent" stroke="currentColor" stroke-width="20" stroke-linecap="round"></path>
    <path d="M10 90 L100 0" fill="transparent" stroke="currentColor" stroke-width="20" stroke-linecap="round"></path>
</svg>

Мой html: 

<img src="/image/arrow.svg" alt="Arrow" style="color:red">

1 Ответ

0 голосов
/ 08 июля 2019

Если вы извлекаете встроенный стиль из SVG, вы можете манипулировать цветом, границами и т. Д., Используя CSS следующим образом: 

svg {
  stroke: #47ccd1;
  fill: transparent;
  stroke-width: 20px;
  stroke-linecap: round;
  transform: scale(0.3);
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" height="100" width="100">
    <path d="M20 10 H90 V80"></path>
    <path d="M10 90 L100 0"></path>
</svg>
...