SVG 直线路径写法示例

直线指令

  • M 移动
  • L 画线
  • H 画水平线 H 20 相对与 L 20 当前y座标
  • V 画垂直线 V 20 相对与 V 当前x座标 20
  • Z 闭合曲线

画直线

大写字母表示到后面值为绝对值,小写字母表示后面值为相对当前点的值 画一条起点是(10, 10)终点点是 (20, 30) 的线

<path d="M 10 10 L 20 30" stroke="#333"/>

在当前点的位置水平移动 10,垂直移动 10,再画一天到 (40, 50) 的线

<path d="m 10 10 L 40 50" stroke="#333"/>

画一个与下面代码等效的矩形

<rect x="10" y="20" width="30" height="15"/>
<path d="M 10 20 h 30 v 15 h -30 Z" stroke="#333"/>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Keegan小钢

Android样式的开发:shape篇

一个应用,应该保持一套统一的样式,包括Button、EditText、ProgressBar、Toast、Checkbox等各种控件的样式,还包括控件间隔、文字...

27220
来自专栏flutter开发者

[Flutter Widget]ExpansionTile

在前面的文章红我们学习了Chip的用法,使用Chip可以很方便的完成对想要的东西打上想要的标签。在文章的最后让大家实现如下的效果

1.2K20
来自专栏进击的君君的前端之路

CSS理解之border

19630
来自专栏mukekeheart的iOS之旅

iOS学习——Quartz2D学习(1)

本文以问答形式主要讲述Quartz2D的相关内容,参考内容是网上下载的学习视频资料。

9620
来自专栏杨龙飞前端

line-height属性总结

19730
来自专栏Golang语言社区

【Go 语言社区】HTML5 canvas验证码识别

canvas 的历史这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把...

53740
来自专栏用户2442861的专栏

python数字图像处理(12):基本图形的绘制

skimage.draw.set_color(img, coords, color)

23320
来自专栏跟着阿笨一起玩NET

asp.net中的比较完美的验证码

本文转载:http://blog.csdn.net/zjk20108023/article/details/7836174

1.3K10
来自专栏天天

框架设计续集(三)

11130
来自专栏程序员的诗和远方

一个比想象中更骚气的圆-svg实现

之前写了一篇Canvas画图-一个比想象中更骚气的圆(渐变圆环),其实SVG也可以实现类似的效果,而且两者api惊人的相似。 关于SVG SVG是一种矢量...

50870

扫码关注云+社区

领取腾讯云代金券