svgdr教程·内部JS
<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>内部JS</h2>
<p>作为可以以代码的形式嵌入HTML中的SVG，其内部可以拥有script标签，我们称之为svg内部JS。不同于svg内部CSS，存为 .svg 文档时，svg内部JS完全失效，它仅作用于SVG代码是嵌入HTML代码之时。</p>
<p>指令：<mark>js()</mark></p>
<p>参数：<mark>jscode</mark></p>
<p>语法：<mark>js(jscode)</mark></p>
<p>参数说明：</p>
<blockquote>
① jscode - 字符型，js代码，不包含 <span class="tRed"><script></sscript></span> 标签，svgdr会自动给添上<br><br>
* 若需要分行书写js代码，请使用反引号<mark>``</mark>将代码包裹起来
</blockquote>
<p>下面的实例演示如何在svg内部创建 <span class="tRed"><script></span> 标签。实例的代码在后面解释，查看JS效果请<span class="tRed">点击小方框</span>：</p>
<svg id="msvg" width="800" height="400"></svg>
<p>完整svg标签和 svgdr 的绘制代码如下：</p>
<div id="div1"><pre id="pre1">
<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>
</pre></div>
<p>代码解释：</p>
<blockquote>
第5行 ：引用 svgdr 模块；<br>
第7行 ：声明 dr 画笔；<br>
第9行 ：绘制矩形，填充色透明、有边框，有id标识符（用于点击操作识别）。注意，填充色设置为 none 时矩形（或其他元素）的填充区域不会接受点击操作，因此使用 transparent 透明色；<br>
第11-25行 ：创建svg内部JS。首先声明一个 tt 变量，它用来限制在一个周期内最多能生成多少个圆。接着是 id="rect1" 的矩形点击操作事件，按svg添加元素的规范创建一个 circle（圆），给它添加 cx、cy、r、fill 等基本属性，然后追加到 id="msvg" 的svg画布中来。每一次点击 tt 变量减去一，减到 tt 的值小于 0 的时候说明圆的总数已经达到了设定范围，这时要移除一个圆（第22行），这么做是确保所绘制的圆的总数不至于太多以节省内存资源。手快的可以试试同时出现在svg画布上的圆是否超过tt变量的设定数量；<br>
第22-30行 ：创建svg内部CSS，用以为svg内的所有圆制作动画和相关属性设置。
</blockquote>
<p>以上代码可以拿到 <a href="http://mhh.52qingyin.cn/api/pcode/" target="_blank">pencil code</a> 运行，或存为本地 .html 文档后用浏览器打开运行。</p>
<p>svg内部JS作用不是特别大，而且它有很多限制（比如前面提到过的存为 .svg 文档后无效等），不过svg内部确实可以存在JS，因此 svgdr 也实现了 js() 指令，该指令所创建的代码其实完全可以在svg外部进行设计。另外应该提一下：对使用svgdr模块而言，svg内部的 <span class="tRed">js()</span> 指令；由于隔离问题，在 svgdr 中，通过module方式引用 svgdr.js 时不能使用业已声明好的 dr 画笔，但使用常规的方式加载时可以，例如svg在线工具使用加载整个 svgdr 资源而不是引用模块，它就可以使用 dr 画布继续在svg内部的js代码快中展开绘制工作，感兴趣的朋友可以将第 9-30 行代码到这里进行测试：<a href="http://mhh.52qingyin.cn/api/svgdr/tool/" target="_blank">svgdr on line</a>。</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';
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; } }
`);
hl.hl(div1, pre1);
</script>
JS完成的互动了，点击小方块会有圆跟子弹一样射击出来。。。。{:4_199:}
点得快点就很明显看出5个一组连成一串了。。
慢点的话它就是匀速向上，看着还挺漂亮。。 花飞飞 发表于 2024-11-27 20:02
JS完成的互动了，点击小方块会有圆跟子弹一样射击出来。。。。
点得快点就很明显看出5个一组连成 ...
这个也只是演示一下，实际上完全可以在svg外部运行JS的 我果然跟JS八字不合，{:4_170:}有的单词根本不认得它。
msvg.removeChild(msvg.querySelector('circle'));这句里就有两个好长的。。
看白老师介绍应该是消除圆的意思。。
就主打一个很神奇。。我点快点它也保证只显示5个一组。 花飞飞 发表于 2024-11-27 20:05
我果然跟JS八字不合，有的单词根本不认得它。
msvg.removeChild(msvg.querySelector('circle')); ...
懂英文的一看就懂 马黑黑 发表于 2024-11-27 20:03
这个也只是演示一下，实际上完全可以在svg外部运行JS的
好哒。。外部运行的比较常见。。
内部JS见见也是开开眼
我在试你说的9-30行，这里完美运行啊，跟教程里的别无二致。。 马黑黑 发表于 2024-11-27 20:06
懂英文的一看就懂
我在懂的路上{:5_117:} 花飞飞 发表于 2024-11-27 20:14
我在懂的路上
小学翘课多 花飞飞 发表于 2024-11-27 20:11
好哒。。外部运行的比较常见。。
内部JS见见也是开开眼
我在试你说的9-30行，这里完美运行啊，跟教程里 ...
差不多的吧 马黑黑 发表于 2024-11-27 20:27
小学翘课多
没事，也长大了。{:4_170:} 马黑黑 发表于 2024-11-27 20:27
差不多的吧
{:4_173:}我也是觉得差不多就好。。 花飞飞 发表于 2024-11-27 20:46
我也是觉得差不多就好。。
是的，如此甚好 花飞飞 发表于 2024-11-27 20:46
没事，也长大了。
就是看不懂英文 svgdr可以做内部js，这个例子中不但有内部js，还有内部css，然后动画就被完美展示了{:4_199:} 这个设计的是点击方式的互动动画，考验手速啊，连着点了，发现我点得不是很均匀，也看不出是不是5个一组，只是有疏有密的{:4_173:} svgdr真强大{:4_199:} 红影 发表于 2024-11-27 21:20
svgdr可以做内部js，这个例子中不但有内部js，还有内部css，然后动画就被完美展示了
完不完美说不好，就是尽可能实现svg的功能，并且基本保证指令与原生svg标签一致（个别标签名太长的缩写），这样便于学习svg 红影 发表于 2024-11-27 21:22
svgdr真强大
和SVGJS等一比，不值一提。
https://svgjs.dev/docs/3.2/ 小辣椒看了云里雾里的{:4_189:} 小辣椒 发表于 2024-11-27 21:58
小辣椒看了云里雾里的
那就玩玩