如何在CSS中添加边框/轮廓/笔划到SVG元素？

Question

由于D3js，我正在将SVG元素注入网页。由于像

这样的语法，我很难设计这些元素的样式

path { border: 3px solid green; }

不起作用。

如何使用CSS为网页中的SVG元素添加边框/轮廓/描边？

Answer 1

在CSS 中，类似于：

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

编辑：拼写错误

Answer 2

问题：如何使用CSS在网页中为SVG元素添加边框/轮廓/笔划？

你可以用CSS做：

path { outline: 3px solid green; }

请注意，截至2018年，Chrome和safari支持它，但可能并非在所有现代浏览器中都可用。见下面的例子：

我通过CSS将大纲应用到包含内部路径的<g>组。在静态它看起来不错。在动态（拖动）中，我可以定期看到这些工件（在左侧）

更新：

• 如果大纲是＆＃34;固体＆＃34; - 没有文物
• safari mobile不支持<g>元素的大纲......

Answer 3

尝试添加阴影。

它看起来不像我的代码笔那么干净，但是仍然有用。

Exception: Not sure how to make a color from "(array([1., 0., 0., 0.]),)"

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;
}