请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
图像元素
指令：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() 指令。
返回目录
| 
发表于 2024-11-13 07:36
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2024-11-13 11:46
楼主
发表于 2024-11-13 20:37
