Question

我正在尝试使用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>

Answer 1

您好像忘记使用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>

这也将绘制缺失的线条。将width和height属性添加到<svg>代码中也是一个好主意。

更多未经请求的建议......
也许您还应该在viewBox="0 0 320 50"标记中包含<svg>属性，就像在一般情况下（当svg驻留在单独的文件中时），这将使svg内容包含在其他页面中更轻松。如果您使用<object data="mysvgdata.svg" type="image/svg+xml" width="640">标记包含svg内容，它将允许缩放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>

为svg path元素指定边框

1 个答案: