svgdr教程·图像元素
<style>.art > p { margin: 12px 0; font: normal 18px/24px sans-serif; }
.art mark { padding: 2px 6px; background: lightblue; }
.art svg { outline: 1px solid silver; }
.tRed { color: red; }
</style>
<div class="art">
<h2>图像元素</h2>
<p>指令：<mark>image()</mark>
<p>参数：<mark>src, x, y, width, height</mark>
<p>语法：<mark>image(src, x, y, width, height)</mark>
<p>参数解释：</p>
<blockquote>
① src - 图片地址，必须，支持 jpg、jpeg、bmp、png、gif 乃至 svg 等格式的图片<br>
② x - image标签左上角X坐标值，默认0<br>
③ y - image标签左上角Y坐标值，默认0<br>
④ width - image宽度，默认图片宽度，超出SVG宽度部分不显示<br>
⑤ height - image高度，默认图片高度，超出随感高度部分不显示
* 图片宽高的设置可能会导致图片变形
</blockquote>
<p>下面给出将 .jpg 图片绘制到svg的实例，先看效果（点击图片可以查看原图）：</p>
<svg id="svg1" width="512" height="288"></svg>
<p>svgdr绘制指令：</p>
<div id="div1"><pre id="pre1">
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
</pre></div>
<p>生成的SVG代码：</p>
<div id="div2"><pre id="pre2"></pre></div>
<p>image() 指令是简单的，查看SVG代码会发现 image 标签也不复杂，可以对比两组代码以熟悉 svgdr image() 指令的参数次序。</p>
<p>本节示例加入了 a 标签，这里顺带介绍 svgdr 的 a() 指令，以后的教程不再专门讲解。a() 指令需要的参数为：</p>
<blockquote>
① id - 必须，<span class="tRed"><a></span> 标签的id标识符，方便后续元素加入到锚中做链接载体；</br>
② url - 必须，锚的链接指向，例如上面示例的图片地址<br>
③ target - 可选，a 标签的 target 属性，值一般为 _blank、_self（默认），和HTML的锚一样
</blockquote>
<p>a() 指令会返回自身，因此，后续绘制的对象可以使用 addTo('aId') 加入到锚中成为链接载体。下面再给出一个代码示范：</p>
<div id="div3"><pre id="pre3">
dr.a('a2', 'http://mhh.52qingyin.cn/'); //使用默认target值，加入锚的元素点击后会在当前页中打开链接
dr.image('https://638183.freep.cn/638183/t22/gif/girl.gif').addTo('a2');
</pre></div>
<p>效果（点击图片当前页的内容会是新的页面，可点击浏览器工具栏的 ← 按钮回退到这里）：</p>
<svg id="svg2" width="100" height="100"></svg>
<p>生成的SVG代码：</p>
<div id="div4"><pre id="pre4"></pre></div>
<p>本节内容相对简单，主讲 image() 指令，顺便介绍一下 svg 锚标签 a 和 svgdr a() 指令。</p>
<p><a href="/forum.php?mod=viewthread&tid=79137&extra=page%3D1" targete="_blank">返回目录</a></p>
</div>
<script type="module">
import hl from 'https://638183.freep.cn/638183/web/mod/helight.js';
import draw from 'https://638183.freep.cn/638183/web/mod/svgdr.js?v=0.53';
var dr1 = draw.dr('svg1');
var picUrl = 'https://638183.freep.cn/638183/t22/10ced.jpg';
dr1.a('a1', picUrl, '_blank');
dr1.image(picUrl, 0, 0, '100%', '100%').addTo('a1');
pre2.textContent = dr1.code(svg1);
var dr2 = draw.dr('svg2');
dr2.a('a2', 'http://mhh.52qingyin.cn/');
dr2.image('https://638183.freep.cn/638183/t22/bear.gif').addTo('a2');
pre4.textContent = dr2.code(svg2);
hl.hl(div1, pre1);
hl.hl(div2, pre2);
hl.hl(div3, pre3);
hl.hl(div4, pre4);
</script>
看完发现这个锚链接是另外加的内容，
dr.a('a1', picUrl, '_blank'); //给image标签加锚（链接），点击图片可以新窗口打开。
图片的几个参数地址，位置 ，宽高这些常用，比较好懂。 a指令原来是这么用的，之前看过，刚又跑回去瞧了一眼。（指令汇总增至57，这个字典太好用）
这里跟图片联系起来再看感觉重点更明确~~
如果在小熊图片里加上target="_blank"，也可以在新窗口打开了。 泡沫 发表于 2024-11-13 11:50
a指令原来是这么用的，之前看过，刚又跑回去瞧了一眼。（指令汇总增至57，这个字典太好用）
这里跟图片联 ...
理解正确 泡沫 发表于 2024-11-13 11:46
看完发现这个锚链接是另外加的内容，
dr.a('a1', picUrl, '_blank'); //给image标签加锚（链接），点击图 ...
这个可能是最好理解的章节之一 这个章节学习了svgdr的加图片，还顺便学习了 a 标签的使用，也就是把图片安装了追踪器，一下子可以找到和调用了。这个好。{:4_187:} 这个还可以设置加载图片的宽高以及加入的位置，svg不光能画，也能直接加入图片{:4_187:} 红影 发表于 2024-11-13 16:35
这个章节学习了svgdr的加图片，还顺便学习了 a 标签的使用，也就是把图片安装了追踪器，一下子可以找到和调 ...
svg的锚和HTML的锚非常一致额 红影 发表于 2024-11-13 16:39
这个还可以设置加载图片的宽高以及加入的位置，svg不光能画，也能直接加入图片
任何XML方言都具备这个能力 马黑黑 发表于 2024-11-13 12:23
这个可能是最好理解的章节之一
嗯哪，目前最烧脑的章节是渐变{:4_173:} 马黑黑 发表于 2024-11-13 12:22
理解正确
主要是好理解{:4_173:} 看不懂，假装很认真看{:4_170:} 马黑黑 发表于 2024-11-13 19:05
svg的锚和HTML的锚非常一致额
主要对HTML的锚也不熟悉啊，现在通过svg的锚倒过来去熟悉HTML的锚了{:4_173:} 马黑黑 发表于 2024-11-13 19:06
任何XML方言都具备这个能力
被黑河做到svgdr里了，用起来更方便{:4_187:} 红影 发表于 2024-11-13 20:54
主要对HTML的锚也不熟悉啊，现在通过svg的锚倒过来去熟悉HTML的锚了
锚是HTML最基本的一个元素：
<a href="xxx" target="_self">点击访问</a> 冬天的雨 发表于 2024-11-13 20:37
看不懂，假装很认真看
挺好的 泡沫 发表于 2024-11-13 19:33
嗯哪，目前最烧脑的章节是渐变
对大多数人来说会如此 马黑黑 发表于 2024-11-13 22:29
对大多数人来说会如此
它的构成是不是比较反人类思维，一部分的人{:4_173:} 现在黑黑一面分享教程，一面实例展示，对小辣椒其实还是很有帮助的 小辣椒 发表于 2024-11-14 15:23
现在黑黑一面分享教程，一面实例展示，对小辣椒其实还是很有帮助的
那就好
页:
[1]
2