为svg路径元素指定边框



我正在尝试使用stroke属性为svg路径元素添加边框,但它没有在所有四个边框上绘制边框。知道如何在这四个边界上画吗

<!DOCTYPE html>
<html>
<body>
<h1>My first SVG</h1>
<svg >
<path fill="rgba(103,103,103,.35)" d="M 149.5 8 L 149.5 40 316.5 40 316.5 8" stroke-width="3" stroke='#3fa9f5' ></path>
</svg> 

</body>
</html>

您似乎忘记使用Z关闭您的路径,如

<svg  width=320 height=50 viewBox="0 0 320 50">
  <path fill="rgba(103,103,103,.35)" d="M 149.5 8 L 149.5 40 316.5 40 316.5 8 Z" stroke-width="3" stroke='#3fa9f5' ></path>
</svg>

这也将绘制缺失的线。在<svg>标签中包含widthheight属性也是一个好主意。

一些不请自来的建议…
也许您还应该在<svg>标记中包含viewBox="0 0 320 50"属性,因为在一般情况下(当svg驻留在单独的文件中时),这将使将svg内容包含到其他页面中更加容易。如果您将svg内容包含在<object data="mysvgdata.svg" type="image/svg+xml" width="640">标记中,它将允许缩放svg内容。结果将类似于:

<svg  width=640 viewBox="0 0 320 50">
  <path fill="rgba(103,103,103,.35)" d="M 149.5 8 L 149.5 40 316.5 40 316.5 8 Z" stroke-width="3" stroke='#3fa9f5' ></path>
</svg>

最新更新