图像元素

指令：image()

参数：src, x, y, width, height

语法：image(src, x, y, width, height)

参数解释：

① src - 图片地址，必须，支持 jpg、jpeg、bmp、png、gif 乃至 svg 等格式的图片
② x - image标签左上角X坐标值，默认0
③ y - image标签左上角Y坐标值，默认0
④ width - image宽度，默认图片宽度，超出SVG宽度部分不显示
⑤ height - image高度，默认图片高度，超出随感高度部分不显示 * 图片宽高的设置可能会导致图片变形

下面给出将 .jpg 图片绘制到svg的实例，先看效果（点击图片可以查看原图）：

svgdr绘制指令：

var picUrl = 'https://638183.freep.cn/638183/t22/10ced.jpg';
dr.a('a1', picUrl, '_blank'); //给image标签加锚（链接）
dr.image(picUrl, 0, 0, '100%', '100%').addTo('a1'); //100%指svg画布的尺寸，可以使用实际数值，例如 512 288
	

生成的SVG代码：

image() 指令是简单的，查看SVG代码会发现 image 标签也不复杂，可以对比两组代码以熟悉 svgdr image() 指令的参数次序。

本节示例加入了 a 标签，这里顺带介绍 svgdr 的 a() 指令，以后的教程不再专门讲解。a() 指令需要的参数为：

① id - 必须，<a> 标签的id标识符，方便后续元素加入到锚中做链接载体；
② url - 必须，锚的链接指向，例如上面示例的图片地址
③ target - 可选，a 标签的 target 属性，值一般为 _blank、_self（默认），和HTML的锚一样

a() 指令会返回自身，因此，后续绘制的对象可以使用 addTo('aId') 加入到锚中成为链接载体。下面再给出一个代码示范：

dr.a('a2', 'http://mhh.52qingyin.cn/'); //使用默认target值，加入锚的元素点击后会在当前页中打开链接
dr.image('https://638183.freep.cn/638183/t22/gif/girl.gif').addTo('a2');
	

效果（点击图片当前页的内容会是新的页面，可点击浏览器工具栏的 ← 按钮回退到这里）：

生成的SVG代码：

本节内容相对简单，主讲 image() 指令，顺便介绍一下 svg 锚标签 a 和 svgdr a() 指令。

返回目录