svg通过虚线画形状

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>

最终的效果：

stroke-dasharray="2 2"表示的意思是，虚线宽2，间隔是2，默认像素单位。

svg通过虚线画形状相关推荐

[SVG学习之路]学会画形状
据上次更新,已经有一段时间了,太忙了,公司有新的项目给我,就没学SVG.这几天回家可以学和更新了. 废话不多说. IDE工具: vscode 动态图软件: gifcam vscode插件: ...
svg: svg预定义的形状
SVG 有一些预定义的形状元素,可被开发者使用和操作: 矩形 <rect> 圆形 <circle> 椭圆 <ellipse> 线 <line> 折线 & ...
vue+TS+svg实现图片任意形状剪切
通过svg剪切功能实现图片剪切这个是原图这些事预设好的切割形状,理论上可以开放给用户自己画这个是剪切完成的效果 <template><div class="conte ...
超详细SVG实战——徒手画pipeline，带你玩转SVG
记录个 svg 实战应用-最近断断续续在搞公司的前端发布平台,本想搞 pipeline ,结果先给 svg 给拦下了.基于发布平台没有同时多项目发布的能力,so-笔者决定搞个 pipeline 把 j ...
如何填充自画形状_AI中如何用形状填充
这篇真的拖延好久,以至于现在我是真的一点儿都想不起来当时做的哪个项目了..只好随机拿一个形状举例啦 1:先在AI中绘制出一个需要填充的形状 2:选中形状,对象-图案-建立,然后点击确定 3:确定后,在 ...
css各种形状怎么画,CSS3 画形状
在制作页面时,常用CSS画各种形状带代替img,这样可以免去一次HTTP请求.而且有些基本形状用CSS实现比切图更方便和灵活.本篇就介绍一下常用形状的画法. 圆形椭圆(半椭圆,4分之一椭圆) 三角形 ...
R语言画形状—直线、矩形、多边形等
plot(1:10)## 画矩形 rect(1, 5, 3, 7, col = "white")## 画直线 # abline(a,b) # a, b the intercept ...
android 虚线画不出来的,Android shape画虚线，不显示或者显示是实线的解决方案
Android 的 shape可以用来实现一些简单的图像,如直线(实线.虚线).圆.矩形.圆角矩形.边框等. 4.4以及以前的版本shape是能正常显示一条虚线的,最经碰到在5.0的手机上显示的是直线 ...
HTML5 SVG用marker画箭头
1.定义一个箭头的marker <defs><marker id="markerArrow" markerWidth="13" markerH ...

svg通过虚线画形状

svg通过虚线画形状相关推荐

最新文章

热门文章