是否可以将 SVG 图像包裹在边框内(即 - 在该图像周围放置 CSS 边框)。
使用
<rect>
在图像周围绘制 fill="none"
。您可以使用 stroke
属性来设置边框。
以下是一些示例,已在 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>
希望有帮助。 :)
如果您想通过 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>
添加笔画=“当前颜色”笔画宽度=“2”