如何在 CSS 中为 SVG 元素添加边框/轮廓/描边？

Posted 2023-03-06

【中文标题】如何在 CSS 中为 SVG 元素添加边框/轮廓/描边？

【英文标题】：How to add border/outline/stroke to SVG elements in CSS?

【发布时间】：2013-08-22 05:26:02

【问题描述】：

感谢 D3js，我将 SVG 元素注入网页。我很难为这些元素设置样式，因为像

这样的语法

path  border: 3px solid green; 

没用。

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

【问题讨论】：

w3.org/TR/SVG/propidx.html

【参考方案1】：

在 CSS 中，类似于：

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

【讨论】：

为我工作：Chrome 27+，Linux。

此代码创建原始形状的轮廓。为了给现有的实体形状添加轮廓，我删除了fill: none;; 行。工作得非常好！谢谢！

编辑 SVG 文件并将其应用于样式属性就像一个魅力。由于某种原因，它无法在 html 文件中工作，但在其他情况下工作得很好。谢谢！

如何让轮廓变成不同的颜色？并保持填充颜色不变？

@redanimalwar：更改 stroke: #646464 值 + 只需删除 fill: none;。

【参考方案2】：

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

你可以在 CSS 中做：

path  outline: 3px solid green; 

请注意，自 2018 年起，它受 chrome 和 safari 支持，但可能并非在所有现代浏览器中都可用。请参见下面的示例：

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

更新：

如果轮廓为“实心” - 没有伪影 safari mobile 不支持 <g> 元素上的轮廓...

【讨论】：

我刚刚意识到轮廓不是 SVG 标准属性的一部分...所以这可能类似于“使用风险自负”...

这个谢尔盖的任何链接来源？

简单，也适用于图像。

【参考方案3】：

尝试添加CSS filter() dropshadow（这可以应用于任何svg：<img>、background-image、dom 等）

或

SVG <filter> <feDropShadow>

当然，Internet Explorer 不支持这些功能。

svg 
  fill: #fff;


#example_1 
  filter: 
    drop-shadow(-1px -1px 0px #3e68ff) 
    drop-shadow(2px -1px 0px #3e68ff) 
    drop-shadow(2px 2px 0px #3e68ff)
    drop-shadow(-1px 2px 0px #3e68ff)

<svg id="example_1"   viewBox="0 0 288 288">
        <path class="st0" d="M144.17,77.84c-37.65,0-68.18,30.52-68.18,68.18c0,37.65,30.52,68.18,68.18,68.18
        c37.65,0,68.18-30.52,68.18-68.18C212.35,108.37,181.83,77.84,144.17,77.84z M166.37,117.02c10.77,0.03,15.31,15.39,15.58,20.03
        c0.15,2.47-2.95,3.15-4.21,1.21c-0.89-1.37-1.44-2.48-2.56-4.65c-1.51-2.93-4.99-6.08-8.71-6.15c-3.72-0.06-7.31,2.95-8.9,5.9
        c-1.23,2.28-1.86,3.4-2.66,4.89c-0.68,1.26-4.16,1.16-4.21-1.26C150.6,132.3,155.61,116.99,166.37,117.02z M121.71,117.02
        c10.81-0.05,15.63,15.43,15.73,20.03c0.05,2.33-3.05,3.44-4.4,1.11c-0.82-1.41-1.39-2.45-2.47-4.55c-1.55-3.03-5.16-6.06-8.85-6.05
        c-3.7,0.01-7.18,3.08-8.76,5.9c-1.24,2.22-2.18,3.19-2.81,4.74c-0.92,2.27-3.92,1.24-3.97-1.26
        C106.09,132.32,111,117.06,121.71,117.02z M184.23,169.45c-1.91,8.19-18.66,26.11-40.26,26.03c-21.44-0.07-38.37-17.77-39.87-26.03
        c-0.58-3.19,2.81-5.81,5.61-4.84c11.86,4.09,18.31,4.74,34.29,4.74c15.98,0,22.02-1.48,34.32-4.84
        C181.52,163.65,184.9,166.55,184.23,169.45z"></path>
</svg>
<svg id="example_2"   viewBox="0 0 288 288">
    <defs>
        <filter id="shadow">
            <feDropShadow dx="-2" dy="-2" stdDeviation="0" flood-color="#3e68ff"></feDropShadow>
            <feDropShadow dx="2" dy="-2" stdDeviation="0" flood-color="#3e68ff"></feDropShadow>
            <feDropShadow dx="2" dy="2" stdDeviation="0" flood-color="#3e68ff"></feDropShadow>
            <feDropShadow dx="-2" dy="2" stdDeviation="0" flood-color="#3e68ff"></feDropShadow>
        </filter>
    </defs>
  <g filter="url(#shadow)">
    <path d="M144.17,77.84c-37.65,0-68.18,30.52-68.18,68.18c0,37.65,30.52,68.18,68.18,68.18
      c37.65,0,68.18-30.52,68.18-68.18C212.35,108.37,181.83,77.84,144.17,77.84z M166.37,117.02c10.77,0.03,15.31,15.39,15.58,20.03
      c0.15,2.47-2.95,3.15-4.21,1.21c-0.89-1.37-1.44-2.48-2.56-4.65c-1.51-2.93-4.99-6.08-8.71-6.15c-3.72-0.06-7.31,2.95-8.9,5.9
      c-1.23,2.28-1.86,3.4-2.66,4.89c-0.68,1.26-4.16,1.16-4.21-1.26C150.6,132.3,155.61,116.99,166.37,117.02z M121.71,117.02
      c10.81-0.05,15.63,15.43,15.73,20.03c0.05,2.33-3.05,3.44-4.4,1.11c-0.82-1.41-1.39-2.45-2.47-4.55c-1.55-3.03-5.16-6.06-8.85-6.05
      c-3.7,0.01-7.18,3.08-8.76,5.9c-1.24,2.22-2.18,3.19-2.81,4.74c-0.92,2.27-3.92,1.24-3.97-1.26
      C106.09,132.32,111,117.06,121.71,117.02z M184.23,169.45c-1.91,8.19-18.66,26.11-40.26,26.03c-21.44-0.07-38.37-17.77-39.87-26.03
      c-0.58-3.19,2.81-5.81,5.61-4.84c11.86,4.09,18.31,4.74,34.29,4.74c15.98,0,22.02-1.48,34.32-4.84
      C181.52,163.65,184.9,166.55,184.23,169.45z"></path>
  </g>
</svg>

或者，创建一些 javascript 函数来克隆 svg 中的每个元素，删除填充/描边属性，并将它们包装在具有 fill="none" 和描边属性集的 g 标记中。然后将其添加到 svg 中。

【讨论】：

我也可以使用阴影过滤器来加载 svg 文件的<img> 标签。我发现 0.5 甚至也可以，所以你可以得到一些非常好的控制。如果只移动 x 和 y，而不是 x+y，它也会变得更精细，所以drop-shadow(0px 0.5px 0px #ccc) drop-shadow(0px -0.5px 0px #ccc) drop-shadow(0.5px 0px 0px #ccc) drop-shadow(-0.5px 0px 0px #ccc)

这适用于任何任意 svg，是一个很好的答案，谢谢。