Как добавить границу/контур/штрих к элементам SVG в CSS?

Я вводил SVG-элементы в веб-страницу благодаря D3js. У меня возникают трудности с стилем этих элементов, поскольку такие синтаксисы, как

path { border: 3px solid green; }

не работает.

Как добавить границу/контур/штрих к элементам SVG в веб-страницах с помощью CSS?

Ответы

Ответ 1

В CSS что-то вроде:

path {
  fill: none;
  stroke: #646464;
  stroke-width: 1px;
  stroke-dasharray: 2,2;
  stroke-linejoin: round;
}

Изменение: опечатка

Ответ 2

На вопрос: как добавить границу/контур/штрих к элементам SVG в веб-страницах с CSS?

Вы можете сделать в CSS:

path { outline: 3px solid green; }

Обратите внимание, что с 2018 года он поддерживается хром и сафари, но может быть недоступен во всех современных браузерах. См. Пример ниже:

Я применил схему через CSS к группе <g> с путями внутри. В статике это выглядит хорошо. В динамическом (перетаскивании) я периодически вижу эти артефакты (слева)

введите описание изображения здесь

UPDATE:

  • если контур "твердый" - нет артефактов
  • Safari mobile не поддерживает контуры элементов <g>...

Ответ 3

Попробуйте добавить тени.

Здесь он выглядит не так чисто, как в моих кодах, но все же может быть полезным.

svg {
  filter: drop-shadow(1px 1px 0px #111) drop-shadow(-1px 1px 0px #111) drop-shadow(1px -1px 0px #111) drop-shadow(-1px -1px 0px #111);
}

.arr {
  fill: none;
  stroke: #5457ff;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
<svg height="45" width="40">
  <g class="arr"><path d="m 5 20 l 15 -15 l 15 15 m -15 0 l 0 20"/></g>
</svg>