马黑黑《svgdr image 指令应用举例 》

醉美水芙蓉

svg image 标签用于在SVG画布中加载任意格式的图片，一般情况下接纳四个参数：

1. x：图片左上角X坐标（例 : x="10"）
2. y：图片左上角Y坐标（例 : y="10"）
3. width：图片宽度（例 : width="200"）
4. height：图片高度（例 : height="100"）

【例】<image href="图片地址" x="10" y="10" width="200" height="100" />

svgdr image 指令语法：image(href, x, y, width, height)

假设我们需要在SVG画布上绘制一个图片，用 svgdr image 指令可以这样：

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

上述指令等同于如下 svg 代码：

<image href="https://638183.freep.cn/638183/small/780.png" x="10" y="10" width="180" height="180" />

图片定位的核心在于 image 的 x、y 坐标，假设我们需要绕圈画 5 张图片：

// 使用 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[0] - 90, // x
        p[1] - 90, // y
        180,       // width
        180        // height
    );
});

// 或者将上述代码简化成
dr.circlePoints(5, 200, 120).forEach(p => {
    dr.image('https://638183.freep.cn/638183/small/780.png', p[0] -90, p[1] - 90, 180, 180);
});
    

现在可以将上述拆解的步骤代码整合起来，使用 svgdr 真正绘制预设图案了。以下实例，image 指令在 circlePoints 指令的配合下生成 5 个圆周点并于其上画 5 张小花图片，图片的中心点与所在圆周点重合。代码还使用 line 指令绘制 5 根从SVG中心点到各圆周点的直线，与花朵共同构建复合图案。此外，还使用 SVG 内嵌 style 标签生成CSS样式设置图片的相关属性和关键帧动画。下面是支持在线预览的完整代码：

<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[0], p[1], 'tan', 3);
        // 5张图片，各图中心点与5个圆周点坐标重合
        dr.image('https://638183.freep.cn/638183/small/780.png', p[0] - 90, p[1] - 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>
    

svgdr 生成的 HTML 代码如下：

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