论坛 › 马黑黑教程专版 › svgdr教程·实例化 use

马黑黑 发表于 2024-11-22 19:19

svgdr教程·实例化 use

<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>实例化 use</h2>
        <p>svg中的 <span class="tRed">&lt;use&gt;</span> 标签用于实例化由 <span class="tRed">&lt;g&gt;</span> 标签或 <span class="tRed">&lt;symbol&gt;</span> 标签所设计的图案，类似于JS对HTML元素的深度克隆，即能将 <span class="tRed">&lt;g&gt;</span> 标签和 <span class="tRed">&lt;symbol&gt;</span> 标签里的含子内容在内的所有可视内容完备呈现。我们知道，g分组和symbol模板自身不在DOM中渲染，所以，<span class="tRed">&lt;use&gt;</span> 标签是在实例化它们而后在自己设定的位置上呈现出来，可以实现单个或多个实例化。use标签还可以拥有自己的尺寸，但仅在实例化带有 viewBox 属性的 symbol 模板时有效。</p>
        <p>指令：<mark>use()</p>
        <p>参数：<mark>href, x, y, width, height</mark></p>
        <p>语法：<mark>use(href, x, y, width, height)</mark></p>
        <p>参数说明：</p>
        <blockquote>
                ① herf - 必须，字符型，use标签绑定的g或symbol标签的id，按照规范，id需要前缀 #，例：<span class="tRed">#Id</span><br>
                ② x - 可选，use左上角X坐标值，数值或字符型百分比，缺省时默认为0<br>
                ③ y - 可选，use左上角Y坐标值，其余同上<br>
                ④ width - 可选，use宽度，数值或百分比，仅在实例化自带 viewBox 属性的 symbol 模板时有效<br>
                ⑤ height - 可选，use高度，其余同上
        </blockquote>
        <p>下面我们来绘制简易的小鸟头部：一个大一点的圆充当头部轮廓、一个小小的圆做眼睛，一个折线模拟喙即鸟嘴，它们都放入g标签，g标签又放入defs标签。然后用一个for循环，一口气实例化6个由g标签组织起来的图案。先看效果：</p>
        <svg id="svg1" width="760" height="100"></svg>
        <p>以下是 svgdr 绘制代码：</p>
        <div id="div1"><pre id="pre1">
dr.defs('defs'); //创建defs标签
dr.g('g1').addTo('defs'); //创建g分组标签并加入defs标签中
dr.circle(20, 20, 20, 'lightblue', '#333', 2).addTo('g1'); //大圆 ：头部轮廓
dr.circle(30, 15, 3, '#333').addTo('g1'); //小圆 ：眼睛
dr.polyline('90 15, 40 20, 85 25','none', '#333', 2).addTo('g1'); //折线 ：喙
//实例化6个g1分组
for(var i = 0; i &lt; 6; i++) {
        dr1.use('#g1', 20 + i * 120, 30);
};
        </pre></div>
        <p>再看看SVG代码：</p>
        <div id="div2"><pre id="pre2"></pre></div>
        <p>以上是实例化g分组的演示。接着看看use实例化symbol模板的实例：</p>
        <svg id="svg2" width="760" height="200"></svg>
        <p>svgdr 绘制代码：</p>
        <div id="div3"><pre id="pre3">
dr.symbol('symb', '0 0 90 90');
dr.polyline('80 15,50 25, 80 25', 'none', 'black', 2).addTo('symb');
dr.circle(25, 25, 25, 'silver').addTo('symb');
dr.circle(40, 20, 3, 'black').addTo('symb');
dr.use('#symb', 20, 20, 100, 100);
dr.use('#symb', 150, 20, 200, 200);
dr.use('#symb', 400, 20, 300, 300);
        </pre></div>
        <p>svgdr绘制代码生成的SVG代码：</p>
        <div id="div4"><pre id="pre4">
        </pre></div>
        <p>需要特别注意：① use标签的width和height属性要起作用需要一个前提，那就是 symbol 设置有 viewBox 属性；② href 属性原先写成 xlink:href，该写法已被 href 写法取代，虽然人们还习惯使用 xlink:href；③ use 标签 herf 属性的值指向被实例化的 symbol 标签，其值由 <span class="tRed">#id</span> 构成；④ symbol 标签可以不用作为 defs 标签的子标签存在，它可以自成一家，放在svg标签内的任何地方。⑤ 和 g 分组一样，一个svg里面可以有多个symbol标签。</p>
       
        <p><a href="/forum.php?mod=viewthread&tid=79137&extra=page%3D1" targete="_blank">返回目录</a></p>
        <!--p><a href="/art/bshow.php?st=7&sd=7&art=mahei_1730435960" 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';

var dr1 = draw.dr('svg1');
dr1.defs('defs');
dr1.g('g1').addTo('defs');
dr1.circle(20, 20, 20, 'lightblue', '#333', 2).addTo('g1');
dr1.circle(30, 15, 3, '#333').addTo('g1');
dr1.polyline('90 15, 40 20, 85 25','none', '#333', 2).addTo('g1');
for(var i = 0; i < 6; i++) {
        dr1.use('#g1', 20 + i * 120, 30);
};
pre2.textContent = dr1.code(svg1);

var dr2 = draw.dr('svg2')
dr2.symbol('symb', '0 0 90 90');
dr2.polyline('80 15,48 25, 80 25', 'none', 'black', 2).addTo('symb');
dr2.circle(25, 25, 25, 'silver').addTo('symb');
dr2.circle(40, 20, 3, 'black').addTo('symb');
dr2.use('#symb', 20, 20, 100, 100);
dr2.use('#symb', 150, 20, 200, 200);
dr2.use('#symb', 400, 20, 300, 300);
pre4.textContent = dr2.code(svg2);

hl.hl(div1, pre1);
hl.hl(div2, pre2);
hl.hl(div3, pre3);
hl.hl(div4, pre4);
</script>

花飞飞 发表于 2024-11-22 19:52

<g> 标签或 <symbol> 标签画出图案，
再由<use>实例显示并摆到指定的位置{:4_199:}
两种方式都层次分明~~

花飞飞 发表于 2024-11-22 19:55

symbol模板不仅更改了位置，还更改了大小。。
简单的三个图案相加绘制出一个很具体形象的小鸟。。
绘小图讲大道理
{:4_173:}

马黑黑 发表于 2024-11-22 20:29

花飞飞 发表于 2024-11-22 19:55
symbol模板不仅更改了位置，还更改了大小。。
简单的三个图案相加绘制出一个很具体形象的小鸟。。
绘小图 ...

{:4_196:}

马黑黑 发表于 2024-11-22 20:29

花飞飞 发表于 2024-11-22 19:52
标签或标签画出图案，
再由实例显示并摆到指定的位置
两种方式都层次分明~~

都不错的

红影 发表于 2024-11-22 21:30

g分组标签并加入defs标签，就可以用use去调用g标签的图案了，svgdr里还能用循环语句去调用呢。{:4_204:}

红影 发表于 2024-11-22 21:34

symbol 标签的调用更好，它有自己的 viewBox，调用时，修改xy还是起到缩放效果。{:4_187:}

马黑黑 发表于 2024-11-22 21:36

红影 发表于 2024-11-22 21:34
symbol 标签的调用更好，它有自己的 viewBox，调用时，修改xy还是起到缩放效果。

xy是位置，width、height才是宽高

马黑黑 发表于 2024-11-22 21:37

红影 发表于 2024-11-22 21:30
g分组标签并加入defs标签，就可以用use去调用g标签的图案了，svgdr里还能用循环语句去调用呢。

svgdr只是以供绘制指令，JS要它在哪做事它就在哪儿做事

红影 发表于 2024-11-22 21:37

<use> 标签文绉绉的说法是实例化，我更喜欢用调用这个词汇，可以通过herf去调用 <g> 标签或 <symbol> 标签里绘好东西{:4_173:}

马黑黑 发表于 2024-11-22 21:39

红影 发表于 2024-11-22 21:37
标签文绉绉的说法是实例化，我更喜欢用调用这个词汇，可以通过herf去调用标签或标签里绘好东西{:4_173 ...

它不是调用，本质上就是实例化。g和symbol是图纸，use是对图纸的应用（use就是使用的意思）

红影 发表于 2024-11-23 08:44

马黑黑 发表于 2024-11-22 21:36
xy是位置，width、height才是宽高

嗯，我说错了，虽然心里知道的，前面两个值是位置，后面的两个才是改变大小用的。

红影 发表于 2024-11-23 08:54

马黑黑 发表于 2024-11-22 21:37
svgdr只是以供绘制指令，JS要它在哪做事它就在哪儿做事

是的，完全服从指挥{:4_173:}

红影 发表于 2024-11-23 08:55

马黑黑 发表于 2024-11-22 21:39
它不是调用，本质上就是实例化。g和symbol是图纸，use是对图纸的应用（use就是使用的意思）

嗯，就是展现出来，调用这个词容易引起误解，我是想好记乱用它的{:4_173:}

梦江南 发表于 2024-11-23 08:59

听老师详细讲解“svgdr教程·实例化 use”代码。{:4_190:}

花飞飞 发表于 2024-11-23 18:40

马黑黑 发表于 2024-11-22 20:29
都不错的

{:4_205:}相当不错，每天一课，天天有收获

花飞飞 发表于 2024-11-23 18:41

马黑黑 发表于 2024-11-22 20:29


{:4_173:}一起乐一个总是可以滴

马黑黑 发表于 2024-11-23 20:26

花飞飞 发表于 2024-11-23 18:41
一起乐一个总是可以滴

我看可以

马黑黑 发表于 2024-11-23 20:27

花飞飞 发表于 2024-11-23 18:40
相当不错，每天一课，天天有收获

也不是每天一课，看忙不忙

花飞飞 发表于 2024-11-24 18:21

马黑黑 发表于 2024-11-23 20:26
我看可以
{:4_190:}喝一个冬天的第一杯奶茶{:4_173:}

查看完整版本: svgdr教程·实例化 use