阅读 145

SVG <line> 画直线

SVG <line>元素是一个SVG基本形状,用来创建一条连接两个点的线。 <line>元素用于在SVG图像内部绘制线条。可以绘制水平直线,垂直竖线直线、斜角直线等

SVG line 在线示例

以下是一些简单的常用SVG <line>画直线的示例:

示例

<svg xmlns="http://www.w3.org/2000/svg"    xmlns:xlink="http://www.w3.org/1999/xlink">        <line x1="0"  y1="10" x2="0"   y2="100" style="stroke:#006600;"></line>        <line x1="10" y1="10" x2="100" y2="100" style="stroke:#006600;"></line>        <line x1="20" y1="10" x2="100" y2="50"  style="stroke:#006600;"></line>        <line x1="30" y1="10" x2="110" y2="10"  style="stroke:#006600;"></line></svg>

测试看看 ‹/›

以上代码运行后直线效果如下:

直线起始点由x1和y1属性设置的点处。
直线终点由x2和y2属性设置的点处。
该style属性设置笔划(线条)的颜色和粗细。


文章分类
代码人生
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐