为 SVG 图像添加边框

问题描述 投票:0回答:4

是否可以将 SVG 图像包裹在边框内(即 - 在该图像周围放置 CSS 边框)。

css svg border
4个回答
49
投票

使用

<rect>
在图像周围绘制
fill="none"
。您可以使用
stroke
属性来设置边框。


27
投票

以下是一些示例,已在 Firefox 中测试:

<svg width="100" height="100" style="border:1px solid black">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

<br><br>

<svg width="300" height="100" style="border:1px solid black">
  <rect width="300" height="100" style="fill:rgb(110, 50, 25); stroke-width:4; stroke:rgb(43, 222, 221);" />
</svg>

<br><br>

<svg width="170" height="170" style="border:1px solid black">
  <rect x="10" y="10" width="150" height="150" style="fill:blue; stroke:pink; stroke-width:5; fill-opacity:0.1; stroke-opacity:0.9;" />
</svg>

希望有帮助。 :)


5
投票

如果您想通过 CSS 添加边框到某些随机几何 SVG 形状,可以使用

outline
CSS 属性来实现。

ellipse {
  outline: 1px solid red;
  outline-offset: 2px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
  >
  <meta
    http-equiv="X-UA-Compatible"
    content="ie=edge"
  >
  <title>Demo</title>
</head>

<body>

<svg width="224" height="112" viewBox="0 0 224 115" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="112.5" cy="84" rx="28.5" ry="28" fill="#D9D9D9"/>
<path d="M26.5 0L52.9138 45H0.0862255L26.5 0Z" fill="#D9D9D9"/>
<path d="M196.5 0L202.899 19.3475H223.605L206.853 31.305L213.252 50.6525L196.5 38.695L179.748 50.6525L186.147 31.305L169.395 19.3475H190.101L196.5 0Z" fill="#D9D9D9"/>
</svg>



</body>

</html>


0
投票

添加笔画=“当前颜色”笔画宽度=“2”

© www.soinside.com 2019 - 2024. All rights reserved.