svg教程：画直线
<style>.art > p { margin: 12px 0; font: normal 18px/24px sans-serif; }
.art mark { padding: 2px 6px; background: lightblue; }
.art svg { outline: 1px solid silver; }
.tRed { color: red; }
</style>
<h2>画直线</h2>
<div class="art">
<p>指令：<mark>line()</mark></p>
<p>参数：<mark>x1, y1, x2, y2, stroke, stroke-width, stroke-linecap</mark></p>
<p>语法：<mark>line(x1, y1, x2, y2, stroke, stroke-width, stroke-linecap)</mark></p>
<p>其中：</p>
<blockquote>
① x1 - 直线起点X坐标值，数值<br>
② y1 - 直线起点Y坐标值，数值<br>
③ x2 - 直线终点X坐标值，数值<br>
④ y2 - 直线终点Y坐标值，数值<br>
⑤ stroke - 描边色，颜色值（字符型）<br>
⑥ stroke-width - 描边线厚度，数值<br>
⑦ stroke-linecap 直线两头端点线帽样式，字符型，可选值 butt（缺省）、round（圆）、square(方块)<br>
* <span class="tRed">数值可以不用引号，字符型需要使用引号，百分比视为字符型</span>
</blockquote>
<p>参数 x1、y1、x2、y2 规定了直线的起点和终点；stroke、stroke-width 定义直线的着色与厚度。注意，在svg，直线没有fill、只有stroke 着色属性，而且必须给stroke属性赋值直线才会显示，因此画直线至少需要前五个参数；stroke-linecap 是直线两头的线帽样式。line() 指令未集成 <span class="tRed">stroke-dasharray</span> 属性，可用 set() 等指令追加，该属性用于定义虚线线段和虚线间隙。请特别注意，在SVG中，设置了线帽虚线的设置可能不生效。下面是几个简单的绘制直线的效果和 svgdr 绘制指令：</p>
<svg id="msvg" width="800" height="400"></svg>
<p>以上图案的 svgdr 绘制代码：</p>
<div id="div1"><pre id="pre1">
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');
</pre></div>
<p>上面绘制指令生成的SVG代码如下：</p>
<div id="div2"><pre id="pre2"></pre></div>
<p>最后发个福利：用 line() 指令绘制一个漂亮的图案。步骤与代码：</p>
<blockquote>
① 建立defs标签用来装载 g 分组（第6行）；<br>
② 建立分组 g 标签用来装载直线组合（第7行）；<br>
③ 画两条直线，令其在水平方向无缝衔接，一一加入g标签（第8、9行）；<br>
④ 通过 use 标签实例画 g 分组，使用循环的方式建立N个这样的 use 标签，每一个旋转一定的角度（第11行）。
</blockquote>
<div id="div3"><pre id="pre3">
<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>
</pre></div>
<p>上面代码可以存为本地 .html 文档并使用浏览器打开，或将代码拿到 <a href="http://mhh.52qingyin.cn/api/pcode/">pencil code</a> 运行。</p>
<p><a href="/forum.php?mod=viewthread&tid=79137&extra=page%3D1" targete="_blank">返回目录</a></p>
</div>
<script type="module">
import hl from 'https://638183.freep.cn/638183/web/mod/helight.js';
import draw from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
var dr = draw.dr('msvg');
dr.line(20, 20, 180, 20, 'fuchsia');
dr.line(20, 120, 180, 120, 'fuchsia', 20);
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');
pre2.textContent = dr.code(msvg);
hl.hl(div1, pre1);
hl.hl(div2, pre2);
hl.hl(div3, pre3);
</script>
跟着老师学代码。辛苦了！{:4_190:} 这个直线的，参数倒是还少点了，至少没有填充了{:4_173:} 最后那个福利好漂亮啊，居然只是让短线更粗点，就有这么漂亮的图案呢{:4_199:} <svg id="zhixian" width="200" height="200" xmlns="http://www.w3.org/2000/svg"viewBox="-100 -100 200 200">
<script type="module">
import Dr1 from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
var dr = Dr1.dr('zhixian');
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> <svg id="zhixian2" width="200" height="200" xmlns="http://www.w3.org/2000/svg"viewBox="-100 -100 200 200">
<script type="module">
import Dr2 from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
var dr = Dr2.dr('zhixian2');
dr.defs('defs');
dr.g('lines').addTo('defs');
dr.line(0, 0, 90, 0, 'purple', 3).addTo('lines');
dr.line(0, 0, 30, 0, 'purple', 5, 'round').addTo('lines');
var all = 6;
Array(all).fill('').forEach( (_,key) => dr.use('#lines').transform(`rotate(${60 / all * key})`) );
</script> 红影 发表于 2024-11-6 20:13
import Dr2 from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
var dr = Dr2.dr('zhixian2 ...
奇怪，在pencil code 试验只有一半，到这里怎么是两头都有，我是从0点画的线啊。 我心心念念的虚线终于上场了，{:4_170:} 好看。。
stroke-dasharray 属性，可用 set() 等指令追加该属性用于定义虚线线段和虚线间隙~~ 刚去试了一下折线通用。。这个追加功能真是太友好了。。
dr.line(180,0,180,400,'silver'); //参照线 ：用于观察线帽占位情况这个图里还给了个参照线，这样 一下子就可能看出线帽的位置和大小。。。
很细心的设计。
福利很漂亮，今天的小播颜值很高，耐看。。 花飞飞 发表于 2024-11-6 21:28
福利很漂亮，今天的小播颜值很高，耐看。。
谢谢{:4_190:} 红影 发表于 2024-11-6 19:46
这个直线的，参数倒是还少点了，至少没有填充了
两点之间没有包围的区域，所以没有填充 fill，fill 是基于被包围区域的 花飞飞 发表于 2024-11-6 21:26
刚去试了一下折线通用。。这个追加功能真是太友好了。。
dr.line(180,0,180,400,'silver'); //参照线 ： ...
有比较一切清晰 花飞飞 发表于 2024-11-6 21:17
我心心念念的虚线终于上场了， 好看。。
stroke-dasharray 属性，可用 set() 等指令追加该属性用 ...
用 style() 指令也可以，参数使用CSS写法 红影 发表于 2024-11-6 20:17
奇怪，在pencil code 试验只有一半，到这里怎么是两头都有，我是从0点画的线啊。
检查一下 svg 标签，viewBox 要设计得当 红影 发表于 2024-11-6 19:49
最后那个福利好漂亮啊，居然只是让短线更粗点，就有这么漂亮的图案呢
{:4_196:} 马黑黑 发表于 2024-11-6 23:47
两点之间没有包围的区域，所以没有填充 fill，fill 是基于被包围区域的
是的，纯粹的直线不存在填充的地方{:4_173:} 马黑黑 发表于 2024-11-6 23:50
检查一下 svg 标签，viewBox 要设计得当
嗯嗯，应该是这个原因。 马黑黑 发表于 2024-11-6 23:51
而且黑黑帖子里的和这里的还不一样的呢{:4_187:} 红影 发表于 2024-11-7 16:39
而且黑黑帖子里的和这里的还不一样的呢
差不多的