svgdr教程：杂项

马黑黑 · 发表于 2024-12-1 09:32

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

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

x

一、清除画布

特殊情形下，可能需要清除svg画布，让一切从头再来。

指令：clear()

参数：无

语法：clear()

参数说明：

* 清空画布的原理其实就是令svg画布的所有innerHTML内容为空，<svg> 标签依然存在。

二、显示代码

查看SVG代码应该是一个不可或缺的指令，编写 svgdr 的动因之一就是好多类似的专业产品都未提供或不太显性提供此功能。或许有人认为这个功能没多大必要，因为可以从外部获取到相应代码。没关系，觉得方便就好。

指令：code()

参数：[source]

语法：clear([source])

参数说明：

① source 为任意内容，可选，缺省时输出 svgdr 刚刚返回的子元素代码，比如刚刚画完的圆，否则输出整个SVG代码。

svgdr 会输出格式化过的svg或svg元素代码，不过对于内部JS和CSS代码的格式化工作目前不太理想，今后会改进。

下面的代码先是画一个圆，然后在控制台分别打印出当前元素代码和整个SVG代码：

dr.circle(100, 100, 50, 'tan');
console.log(1, dr.code());
console.log(2, dr.code(msvg));

运行上述代码，按F12打开devTools，切换到控制台，会看到代码是按照 textContent 方式安排好的。可以将上例的代码复制到这里进行测试：svgdr on line。

三、重设svg

在绘制图案时，可能出现一些需求，如改变svg画布大小、视口、补充命名空间、追加style属性等等。

指令：setsvg()

参数：option

语法：setsvg(option)

参数说明：

* option参数为JS对象，由放在花括号里的一组或多组键值对构成，健名即为属性，键值为属性值，各键值对用小角逗号隔开；若健名是由短连接线连成的复合词，需要将健名用小角引号包裹，但style里的健名则无需这样做、按CSS属性设置规则书写即可。例如：{width: 400, height: 400, viewBox: '-200 -200 400 400', style: 'stroke: gray; stroke-width: 8'}

以下代码svg原先设置 800*600 的尺寸，没有设置视口。svgdr 通过 setsvg() 指令修改其尺寸为 400*400 并设置了视口和style样式，最后画一个半径为190px的圆并使用svg标签的 style 属性所设置的 fill 和 stroke、stroke-width 渲染圆的样式：

<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>

上例代码可以拿到 pencil code 或存为本地 .html 文档后运行以查看效果。

返回目录