马黑黑《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>
实用新颖，谢谢分享
页:
[1]