svgdr教程：杂项
<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>
<div class="art">
<h2>一、清除画布</h2>
<p>特殊情形下，可能需要清除svg画布，让一切从头再来。</p>
<p>指令：<mark>clear()</mark></p>
<p>参数：<mark>无</mark></p>
<p>语法：<mark>clear()</mark></p>
<p>参数说明：</p>
<blockquote>
* 清空画布的原理其实就是令svg画布的所有innerHTML内容为空，<svg> 标签依然存在。
</blockquote>
<h2>二、显示代码</h2>
<p>查看SVG代码应该是一个不可或缺的指令，编写 svgdr 的动因之一就是好多类似的专业产品都未提供或不太显性提供此功能。或许有人认为这个功能没多大必要，因为可以从外部获取到相应代码。没关系，觉得方便就好。</p>
<p>指令：<mark>code()</mark></p>
<p>参数：<mark></mark></p>
<p>语法：<mark>clear()</mark></p>
<p>参数说明：</p>
<blockquote>
① source 为任意内容，可选，缺省时输出 svgdr 刚刚返回的子元素代码，比如刚刚画完的圆，否则输出整个SVG代码。
</blockquote>
<p>svgdr 会输出格式化过的svg或svg元素代码，不过对于内部JS和CSS代码的格式化工作目前不太理想，今后会改进。</p>
<p>下面的代码先是画一个圆，然后在控制台分别打印出当前元素代码和整个SVG代码：</p>
<div id="div1"><pre id="pre1">
dr.circle(100, 100, 50, 'tan');
console.log(1, dr.code());
console.log(2, dr.code(msvg));
</pre></div>
<p>运行上述代码，按F12打开devTools，切换到控制台，会看到代码是按照 textContent 方式安排好的。可以将上例的代码复制到这里进行测试：<a href="http://mhh.52qingyin.cn/api/svgdr/tool/" target="_blank">svgdr on line</a>。</p>
<h2>三、重设svg</h2>
<p>在绘制图案时，可能出现一些需求，如改变svg画布大小、视口、补充命名空间、追加style属性等等。</p>
<p>指令：<mark>setsvg()</mark></p>
<p>参数：<mark>option</mark></p>
<p>语法：<mark>setsvg(option)</mark></p>
<p>参数说明：</p>
<blockquote>
* option参数为JS对象，由放在花括号里的一组或多组键值对构成，健名即为属性，键值为属性值，各键值对用小角逗号隔开；若健名是由短连接线连成的复合词，需要将健名用小角引号包裹，但style里的健名则无需这样做、按CSS属性设置规则书写即可。例如：{width: 400, height: 400, viewBox: '-200 -200 400 400', style: 'stroke: gray; stroke-width: 8'}
</blockquote>
<p>以下代码svg原先设置 800*600 的尺寸，没有设置视口。svgdr 通过 setsvg() 指令修改其尺寸为 400*400 并设置了视口和style样式，最后画一个半径为190px的圆并使用svg标签的 style 属性所设置的 fill 和 stroke、stroke-width 渲染圆的样式：</p>
<div id="div2"><pre id="pre2">
<svg id="msvg" width="800" height="300"></svg>
<script type="module">
import draw from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
var dr = draw.dr(msvg);
dr.setsvg({
width: 400,
height: 400,
viewBox: '-200 -200 400 400',
style: 'fill: pink; stroke: red; stroke-width: 6;',
});
dr.circle(0,0,190);
</script>
</pre></div>
<p>上例代码可以拿到 <a href="http://mhh.52qingyin.cn/api/pcode/" target="_blank">pencil code</a> 或存为本地 .html 文档后运行以查看效果。</p>
<p><a href="/forum.php?mod=viewthread&tid=79137&extra=page%3D1" targete="_blank">返回目录</a></p>
<!--p><a href="/art/bshow.php?st=7&sd=7&art=mahei_1730435960" 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';
hl.hl(div1, pre1);
hl.hl(div2, pre2);
</script>
清除功能好玩，什么时候能用到是个谜。。
重设svg可以理解，看第一行代码不是说开头设的是800*600么。。
这个追加属性的功能很强大。。。{:4_174:} 显示代码又跑到控制台去了，去看过那里就是迷宫。。{:4_173:} 花飞飞 发表于 2024-12-1 13:20
显示代码又跑到控制台去了，去看过那里就是迷宫。。
这是昨演示，需要的时候可以放在想放的地方 花飞飞 发表于 2024-12-1 13:19
清除功能好玩，什么时候能用到是个谜。。
重设svg可以理解，看第一行代码不是说开头设的是800*600么。。
...
这是重设，不是追加 重设还能设置视口和style样式，这个很方便，调整图形尺寸也会变得很方便了呢{:4_187:} 显示代码也很重要，可以知道是怎样设计的了，就像看黑黑的帖子，每次都要看到代码再加上解释才能明白黑黑的设计思路，只看效果是很难看出的{:4_173:} 这些杂项都是很实用的呢{:4_187:} 红影 发表于 2024-12-1 17:04
这些杂项都是很实用的呢
{:4_190:} 马黑黑 发表于 2024-12-1 17:27
跟在后面学习再学习{:4_187:} 马黑黑 发表于 2024-12-1 14:07
这是昨演示，需要的时候可以放在想放的地方
好哒。。F12这是个密室按纽{:4_170:} 花飞飞 发表于 2024-12-2 18:18
好哒。。F12这是个密室按纽
玩前端代码必须学会使用 devtools 马黑黑 发表于 2024-12-1 14:08
这是重设，不是追加
好哒，老师严谨。。覆盖之前已有的设置。。。{:4_173:} 马黑黑 发表于 2024-12-2 18:19
玩前端代码必须学会使用 devtools
devtools{:4_170:}这是个啥东东。
小白看它着实高深。。特别是F12 花飞飞 发表于 2024-12-2 18:22
devtools这是个啥东东。
小白看它着实高深。。特别是F12
就是你按F12弹出的东东，控制台是其中的一个组成部分而已 马黑黑 发表于 2024-12-2 18:41
就是你按F12弹出的东东，控制台是其中的一个组成部分而已
对，控制台并排有好多按纽{:4_199:} 花飞飞 发表于 2024-12-2 19:03
对，控制台并排有好多按纽
很多很多，会用控制台可以查看JS错误，至少知道错在第几行第几个字节 马黑黑 发表于 2024-12-2 19:35
很多很多，会用控制台可以查看JS错误，至少知道错在第几行第几个字节
光一个控制台就懵了，别的懵得更厉害。。
应该就是平时用到的太少，所以比较不熟悉 花飞飞 发表于 2024-12-3 16:46
光一个控制台就懵了，别的懵得更厉害。。
应该就是平时用到的太少，所以比较不熟悉
计算机相关知识、英文，都得跟上 马黑黑 发表于 2024-12-3 17:07
计算机相关知识、英文，都得跟上
{:4_173:}那得有大量的时间来学习，哎，现在时间都碎碎 的。