svg通过虚线画形状

最新推荐文章于 2025-10-22 22:36:24 发布

原创最新推荐文章于 2025-10-22 22:36:24 发布 · 3.8k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#svg #rect #stroke #dasharray #line

web 专栏收录该内容

52 篇文章

订阅专栏

本文介绍了如何使用SVG中的stroke-dasharray属性来创建虚线图形。通过设置不同的数值，例如'10 10'或'2 2'，可以控制虚线的宽度和间隔，实现自定义的虚线样式。示例代码展示了如何为矩形和圆形应用虚线边框。

svg可以做很多事情，如今和canvas在web开发中使用越来越多。默认svg画图，如果是空白填充，最后展示的形状线条是实线。

今天介绍一个属性，可以上画出的图形显示虚线。这个属性就是stroke-dasharray，一般给两个值，如下所示：

<!doctype html>
<html>
   <head>
       <meta charset=“utf-8”/>
       <title>svg demo</title>
   </head>
   <body>
       <h2>svg stroke with dashed line</h2>
      <svg width="1000" height="500">
          <rect  x=20 y=20 width=100 height=100 stroke="gray" fill="white" stroke-width="2" stroke-dasharray="10 10"></rect>
          <circle cx=70 cy=200 r=50 stroke="gray" fill="white" stroke-width="2" stroke-dasharray="2 2"></circle>
      </svg>
  </body>
 </html>

最终的效果：