svgdr image 指令应用举例
<style>.artBox { margin: 20px auto; font: normal 18px/26px sans-serif; }
.artBox mark { padding: 2px 6px; background: #ccc; }
.artBox blockquote { padding: 14px; border: solid gray; border-width: 0 4px; border-radius: 10px; background: #ddd; }
.artBox p { margin: 10px 0; }
</style>
<div class="artBox">
<p>svg image 标签用于在SVG画布中加载任意格式的图片，一般情况下接纳四个参数：</p>
<blockquote>
<ol>
<li>x：图片左上角X坐标（例 : x="10"）</li>
<li>y：图片左上角Y坐标（例 : y="10"）</li>
<li>width：图片宽度（例 : width="200"）</li>
<li>height：图片高度（例 : height="100"）</li>
</ol>
<p>【例】<code><image href="图片地址" x="10" y="10" width="200" height="100" /></code></p>
</blockquote>
<p>svgdr image 指令语法：<mark>image(href, x, y, width, height)</mark></p>
<p>假设我们需要在SVG画布上绘制一个图片，用 svgdr image 指令可以这样：</p>
<div class="hEdiv"><pre class="hEpre">
var img = 'https://638183.freep.cn/638183/small/780.png';
dr.image(
img, // href
10,// x
10,// y
180, // width
180// height
);
// 或者干脆写成一行
dr.image('https://638183.freep.cn/638183/small/780.png', 10, 10, 180, 180);
</pre></div>
<p>上述指令等同于如下 svg 代码：</p>
<div class="hEdiv"><pre class="hEpre">
<image href="https://638183.freep.cn/638183/small/780.png" x="10" y="10" width="180" height="180" /></pre></div>
<p>图片定位的核心在于 image 的 x、y 坐标，假设我们需要绕圈画 5 张图片：</p>
<div class="hEdiv"><pre class="hEpre">
// 使用 circlePoints 指令获得 5 个圆周点坐标
var points = dr.circlePoints(
5, // pointsNumber
200, // R
120, // r
);
// 遍历圆周上5个点，在每一个点上合适的位置画图
points.forEach(p => {
dr.image(
'https://638183.freep.cn/638183/small/780.png', // href
p - 90, // x
p - 90, // y
180, // width
180 // height
);
});
// 或者将上述代码简化成
dr.circlePoints(5, 200, 120).forEach(p => {
dr.image('https://638183.freep.cn/638183/small/780.png', p -90, p - 90, 180, 180);
});
</pre></div>
<p>现在可以将上述拆解的步骤代码整合起来，使用 svgdr 真正绘制预设图案了。以下实例，image 指令在 circlePoints 指令的配合下生成 5 个圆周点并于其上画 5 张小花图片，图片的中心点与所在圆周点重合。代码还使用 line指令绘制 5 根从SVG中心点到各圆周点的直线，与花朵共同构建复合图案。此外，还使用 SVG 内嵌 style 标签生成CSS样式设置图片的相关属性和关键帧动画。下面是支持在线预览的完整代码：</p>
<div class="hEdiv" data-prev="1"><pre class="hEpre">
<svg id="msvg" widt="400" height="400" viewBox="0 0 400 400"></svg>
<script charset="utf-8" src="https://638183.freep.cn/638183/svgdr/svgdr.min.js"></script>
<script>
var dr = _dr(msvg); //dr画笔
// 生成5个圆周点并在其上绘制图案
dr.circlePoints(5, 200, 120).forEach(p => {
// 5根从圆心到各点的连线
dr.line(200, 200, p, p, 'tan', 3);
// 5张图片，各图中心点与5个圆周点坐标重合
dr.image('https://638183.freep.cn/638183/small/780.png', p - 90, p - 90, 180, 180);
});
// 生成svg内嵌CSS样式
dr.css(`
image { transform-box: fill-box; transform-origin: center; animation: rot linear 8s infinite; }
@keyframes rot { to { transform: rotate(360deg); } }
`);
</script>
</pre></div>
<p>svgdr 生成的 HTML 代码如下：<p>
<div class="hEdiv" data-prev="1"><pre class="hEpre">
<svg id="msvg" width="400" height="400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
<line x1="200" y1="200" x2="320.00" y2="200.00" stroke="tan" stroke-width="3"></line>
<image href="https://638183.freep.cn/638183/small/780.png" x="230" y="110" width="180" height="180"></image>
<line x1="200" y1="200" x2="237.08" y2="314.13" stroke="tan" stroke-width="3"></line>
<image href="https://638183.freep.cn/638183/small/780.png" x="147.08" y="224.13" width="180" height="180"></image>
<line x1="200" y1="200" x2="102.92" y2="270.53" stroke="tan" stroke-width="3"></line>
<image href="https://638183.freep.cn/638183/small/780.png" x="12.920000000000002" y="180.52999999999997" width="180" height="180"></image>
<line x1="200" y1="200" x2="102.92" y2="129.47" stroke="tan" stroke-width="3"></line>
<image href="https://638183.freep.cn/638183/small/780.png" x="12.920000000000002" y="39.47" width="180" height="180"></image>
<line x1="200" y1="200" x2="237.08" y2="85.87" stroke="tan" stroke-width="3"></line>
<image href="https://638183.freep.cn/638183/small/780.png" x="147.08" y="-4.1299999999999955" width="180" height="180"></image>
<style>
image {
transform-box: fill-box;
transform-origin: center;
animation: rot linear 8s infinite;
}
@keyframes rot {
to { transform: rotate(360deg); }
}
</style>
</svg>
</pre></div>
</div>
<script type="module">
import hl from 'https://638183.freep.cn/638183/web/js/hl.js';
const divs = document.querySelectorAll('.hEdiv');
const pres = document.querySelectorAll('.hEpre');
divs.forEach((div,idx) => hl.hl(div, pres));
</script> 黑黑老师晚上嚎！谢谢老师辛苦，学习了。{:4_187:} 很漂亮的五朵小白花。 svgdr image 指令好像没用过呢，谢谢马老师直观、详尽的应用举例{:4_180:} 杨帆 发表于 2026-8-14 21:15
svgdr image 指令好像没用过呢，谢谢马老师直观、详尽的应用举例
指令严格遵循 image 标签的常规属性 梦江南 发表于 2026-8-14 20:27
很漂亮的五朵小白花。
感谢谬赞 梦江南 发表于 2026-8-14 20:26
黑黑老师晚上嚎！谢谢老师辛苦，学习了。
晚上嚎 马黑黑 发表于 2026-8-14 21:36
指令严格遵循 image 标签的常规属性
好的，这样应用起来就容易一些了{:4_190:} 杨帆 发表于 2026-8-14 21:40
好的，这样应用起来就容易一些了
svgdr 开发本意就是为了学习 svg，同时可以简化对 svg 的实际应用。 马黑黑 发表于 2026-8-14 21:53
svgdr 开发本意就是为了学习 svg，同时可以简化对 svg 的实际应用。
马老师开发svgdr 意义重大， 是学习 svg的法宝，也是简化svg 应用的利器{:4_199:} 杨帆 发表于 2026-8-15 17:31
马老师开发svgdr 意义重大， 是学习 svg的法宝，也是简化svg 应用的利器
能力有限，预期目的实现的不是很理想 马黑黑 发表于 2026-8-15 18:49
能力有限，预期目的实现的不是很理想
目前看到的效果已很强大，相信会越来越完善，为马老师点赞{:4_199:} svgdr 真的十分简洁，只是当时学的时候记得住，很久不用就有点迷糊了。
黑黑应该经常讲讲，多刺激刺激也许就记得住了{:4_173:} 红影 发表于 2026-8-17 23:36
svgdr 真的十分简洁，只是当时学的时候记得住，很久不用就有点迷糊了。
黑黑应该经常讲讲，多刺激刺激也许 ...
记不住正常。
svgdr 基于并遵循 SVG 基本原理封装，如果对 SVG 了解的不全面，理解 svgdr 指令就会卡壳 杨帆 发表于 2026-8-15 23:51
目前看到的效果已很强大，相信会越来越完善，为马老师点赞
入门级的东东吧，基本能用 马黑黑 发表于 2026-8-18 07:35
入门级的东东吧，基本能用
入门级有普适性，也很好用，但要用好并不容易呢{:4_190:} 杨帆 发表于 2026-8-18 11:56
入门级有普适性，也很好用，但要用好并不容易呢
用好等于对 SVG 有全面的认知，然后，借助 svgdr，画个图更简单 马黑黑 发表于 2026-8-18 19:50
用好等于对 SVG 有全面的认知，然后，借助 svgdr，画个图更简单
是，在对 SVG 有全面认知的基础上，借助 svgdr画图，挺好{:4_190:} 杨帆 发表于 2026-8-18 20:54
是，在对 SVG 有全面认知的基础上，借助 svgdr画图，挺好
{:4_191:}
页:
[1]