svg教程：画直线

马黑黑 · 发表于 2024-11-6 07:32

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

画直线

指令：line()

参数：x1, y1, x2, y2, stroke, stroke-width, stroke-linecap

语法：line(x1, y1, x2, y2, stroke, stroke-width, stroke-linecap)

其中：

① x1 - 直线起点X坐标值，数值
② y1 - 直线起点Y坐标值，数值
③ x2 - 直线终点X坐标值，数值
④ y2 - 直线终点Y坐标值，数值
⑤ stroke - 描边色，颜色值（字符型）
⑥ stroke-width - 描边线厚度，数值
⑦ stroke-linecap 直线两头端点线帽样式，字符型，可选值 butt（缺省）、round（圆）、square(方块)
* 数值可以不用引号，字符型需要使用引号，百分比视为字符型

参数 x1、y1、x2、y2 规定了直线的起点和终点；stroke、stroke-width 定义直线的着色与厚度。注意，在svg，直线没有fill、只有stroke 着色属性，而且必须给stroke属性赋值直线才会显示，因此画直线至少需要前五个参数；stroke-linecap 是直线两头的线帽样式。line() 指令未集成 stroke-dasharray 属性，可用 set() 等指令追加，该属性用于定义虚线线段和虚线间隙。请特别注意，在SVG中，设置了线帽虚线的设置可能不生效。下面是几个简单的绘制直线的效果和 svgdr 绘制指令：

以上图案的 svgdr 绘制代码：

dr.line(20, 20, 180, 20, 'fuchsia'); //最少参数 ：需要上色
dr.line(20, 120, 180, 120, 'fuchsia', 20); //+线厚(线帽默认 butt
dr.line(20, 220, 180, 220, 'fuchsia', 20, 'square'); //方形线帽占位
dr.line(20, 320, 180, 320, 'fuchsia', 20, 'round'); //圆形线帽占位
dr.line(180,0,180,400,'silver'); //参照线 ：用于观察线帽占位情况
//画几根竖线
dr.line(300, 20, 300, 120, 'deepskyblue');
dr.line(300, 140, 300, 240, 'deepskyblue', 10);
dr.line(300, 260, 300, 360, 'deepskyblue', 20, 'round');
//画斜线
dr.line(420, 20, 780,120, 'purple');
dr.line(420, 60, 780,160, 'purple', 10);
dr.line(420, 120, 780,220, 'purple', 10, 'round');
dr.line(420, 300, 650,240, 'tan', 20);
dr.line(420, 380, 720,240, 'tan', 10).set('stroke-dasharray','8 4');

上面绘制指令生成的SVG代码如下：

最后发个福利：用 line() 指令绘制一个漂亮的图案。步骤与代码：

① 建立defs标签用来装载 g 分组（第6行）；
② 建立分组 g 标签用来装载直线组合（第7行）；
③ 画两条直线，令其在水平方向无缝衔接，一一加入g标签（第8、9行）；
④ 通过 use 标签实例画 g 分组，使用循环的方式建立N个这样的 use 标签，每一个旋转一定的角度（第11行）。

<svg id="mysvg" width="200" height="200" viewBox="-100 -100 200 200">
 
<script type="module">
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
var dr = Dr.dr('mysvg');
dr.defs('defs');
dr.g('lines').addTo('defs');
dr.line(-90, 0, 90, 0, 'purple', 4).addTo('lines');
dr.line(-30, 0, 30, 0, 'purple', 8, 'round').addTo('lines');
var all = 6;
Array(all).fill('').forEach( (_,key) => dr.use('#lines').transform(`rotate(${180 / all * key})`) );
</script>

上面代码可以存为本地 .html 文档并使用浏览器打开，或将代码拿到 pencil code 运行。

返回目录