我正在尝试使用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>
标签中包含width
和height
属性也是一个好主意。
一些不请自来的建议…
也许您还应该在<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>