svgdr教程·内部JS

马黑黑 · 发表于 2024-11-27 19:02

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

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

x

内部JS

作为可以以代码的形式嵌入HTML中的SVG，其内部可以拥有script标签，我们称之为svg内部JS。不同于svg内部CSS，存为 .svg 文档时，svg内部JS完全失效，它仅作用于SVG代码是嵌入HTML代码之时。

指令：js()

参数：jscode

语法：js(jscode)

参数说明：

① jscode - 字符型，js代码，不包含 <script></sscript> 标签，svgdr会自动给添上

* 若需要分行书写js代码，请使用反引号``将代码包裹起来

下面的实例演示如何在svg内部创建 <script> 标签。实例的代码在后面解释，查看JS效果请点击小方框：

完整svg标签和 svgdr 的绘制代码如下：

<svg id="msvg" width="800" height="400"></svg>

<script type="module">

import draw from 'https://638183.freep.cn/638183/web/mod/svgdr.js';

var dr = draw.dr('msvg');

dr.rect(350, 280, 100, 100, 'transparent', 'cadetblue').id('rect1').style('cursor: pointer');

dr.js(`
	var tt = 5;
	rect1.onclick = () => {
		var circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
		circle.setAttribute('cx', 400);
		circle.setAttribute('cy', 340);
		circle.setAttribute('r', 20);
		circle.setAttribute('fill', 'pink');
		msvg.appendChild(circle);
		tt --;
		if(tt < 0) {
			msvg.removeChild(msvg.querySelector('circle'));
		}
	};
`);

dr.css(`
	circle { transform-box: fill-box; transform-origin: center; animation: up 2s linear forwards; }
	@keyframes up { to { cy: -50; } }
`);

</script>

代码解释：

第5行：引用 svgdr 模块；
第7行：声明 dr 画笔；
第9行：绘制矩形，填充色透明、有边框，有id标识符（用于点击操作识别）。注意，填充色设置为 none 时矩形（或其他元素）的填充区域不会接受点击操作，因此使用 transparent 透明色；
第11-25行：创建svg内部JS。首先声明一个 tt 变量，它用来限制在一个周期内最多能生成多少个圆。接着是 id="rect1" 的矩形点击操作事件，按svg添加元素的规范创建一个 circle（圆），给它添加 cx、cy、r、fill 等基本属性，然后追加到 id="msvg" 的svg画布中来。每一次点击 tt 变量减去一，减到 tt 的值小于 0 的时候说明圆的总数已经达到了设定范围，这时要移除一个圆（第22行），这么做是确保所绘制的圆的总数不至于太多以节省内存资源。手快的可以试试同时出现在svg画布上的圆是否超过tt变量的设定数量；
第22-30行：创建svg内部CSS，用以为svg内的所有圆制作动画和相关属性设置。

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

svg内部JS作用不是特别大，而且它有很多限制（比如前面提到过的存为 .svg 文档后无效等），不过svg内部确实可以存在JS，因此 svgdr 也实现了 js() 指令，该指令所创建的代码其实完全可以在svg外部进行设计。另外应该提一下：对使用svgdr模块而言，svg内部的 js() 指令；由于隔离问题，在 svgdr 中，通过module方式引用 svgdr.js 时不能使用业已声明好的 dr 画笔，但使用常规的方式加载时可以，例如svg在线工具使用加载整个 svgdr 资源而不是引用模块，它就可以使用 dr 画布继续在svg内部的js代码快中展开绘制工作，感兴趣的朋友可以将第 9-30 行代码到这里进行测试：svgdr on line。

返回目录