svg : symbol 标签
<style>.papa > p { margin: 10px 0; }
.mama { margin-left: 40px; position: relative; }
.hCode, .hLineNum { padding: 10px; width: calc(100% - 40px); font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; background: beige; box-sizing: border-box; overflow-x: auto; tab-size: 4; position: absolute; }
.hCode { left: 40px; margin-left: -40px; padding-left: 45px; }
.hLineNum { width: 40px; background: beige; text-align: right; pointer-events: none; color: gray; }
.stage { display: grid; place-items: center; }
.hidden { display: none; }
</style>
<div class="papa">
<p>symbol的原意指象征、标记、符号等，在svg里，symbol标签定义图像模板对象，由use标签将其实例化。实例化symbol定义的图像模板，通过use标签的 xlink:href="#id" 或 href="#id" 实现，前者针对老旧浏览器，后者现代浏览器除Safri外都完美支持，为了兼容，建议使用前者或两个都用。symbol的id标识必须设置，否则无从实例化。symbol可以拥有自己的 viewBox 视口设置，若设置，则其内的实体图像位置与尺寸的安排应与之配套。</p>
<p>use标签在实例化symbol图像模板时，可以设定XY坐标对图像进行定位，还可以设置自己的实例尺寸。以下代码，我们用symbol定义了一组图像模板，内有一个polygon菱形、一个circle小圆点，symbol有自己的id和viewBox；然后，使用三个use标签实例化 id="sym" 的symbol，xy属性值一样，宽高各不相同：</p>
<div class="mama">
<pre class="hCode"><svg width="200" height="200" style="border: 1px solid gray;">
<symbol id="sym" viewBox="0 0 110 110">
<polygon points="100 50, 50 100, 0 50, 50 0" fill="none" stroke="red" />
<circle cx="50" cy="50" r="5" fill="green" />
</symbol>
<use xlink:href="#sym" x="10" y="10" width="200" height="200" />
<use xlink:href="#sym" x="10" y="10" width="100" height="100" />
<use xlink:href="#sym" x="10" y="10" width="50" height="50" />
</svg></pre>
<pre class="hLineNum"></pre>
</div>
<p><button class="btnok" type="button" value="运行代码">运行代码</button></p>
<div class="stage"></div>
<p>defs是个单身汉，它自身一无所有，但是，symbol和defs不一样，symbol有名分还有视口属性，经由自身的id而非子元素的id被实例化。二者也有相同的地方，就是，若不被实例化，它们定义的图像都不会呈现也不占位。</p>
</div>
<script>
let btns = document.querySelectorAll('.btnok'),
stages = document.querySelectorAll('.stage'),
hCodes = document.querySelectorAll('.hCode'),
hLineNums = document.querySelectorAll('.hLineNum'),
mamas = document.querySelectorAll('.mama');
hCodes.forEach((item,key) => {
let lines = hCodes.innerText.trim().split('\n').length;
let str = '';
for(let i = 0; i < lines; i ++) {
str += i + 1 + '\n';
}
hLineNums.innerText = str;
mamas.style.cssText += `height: ${hCodes.offsetHeight + 20}px`;
if(!btns) return;
btns.onclick = () => {
let val = btns.value;
val === '运行代码' ? codeRun(hCodes.innerText, stages) : codeRun('',stages);
btns.value = btns.innerText = val === '运行代码' ? '关闭运行' : '运行代码';
};
});
let codeRun = (str,ele) => {
let reg = /(<script(.*?)>)(.|\n)*?(<\/script>)/g;
let js_str, html_str;
if(str.match(reg) !== null) {
js_str = str.match(reg);
html_str = str.replace(js_str, '').trim();
js_str = js_str.replace(/<[\/]{0,1}script[^>]*>/g,'').trim();
} else {
js_str = '';
html_str = str.trim();
}
ele.innerHTML = html_str;
let myfunc = new Function(js_str);
myfunc();
};
</script>
“symbol可以拥有自己的 viewBox 视口设置”，这个厉害了，比defs可控得多了{:4_187:} use标签在调用symbol时，还能设置自己的尺寸，这个很方便啊。 加分分。{:4_199:} 樵歌 发表于 2023-11-15 12:53
加分分。
谢分 红影 发表于 2023-11-15 11:15
“symbol可以拥有自己的 viewBox 视口设置”，这个厉害了，比defs可控得多了
各用用处 红影 发表于 2023-11-15 11:17
use标签在调用symbol时，还能设置自己的尺寸，这个很方便啊。
use元素针对不同的引用方式，有不同的功能限制 马黑黑 发表于 2023-11-15 19:01
各用用处
感觉这个特别有用。 红影 发表于 2023-11-15 22:13
感觉这个特别有用。
都有用 马黑黑 发表于 2023-11-15 19:02
use元素针对不同的引用方式，有不同的功能限制
是的，这个两个标签的引用已经不一样了。 红影 发表于 2023-11-15 22:14
是的，这个两个标签的引用已经不一样了。
svg这类元素有好几个，各有各的功用 马黑黑 发表于 2023-11-15 23:07
svg这类元素有好几个，各有各的功用
要学好这些还真不容易呢。 红影 发表于 2023-11-16 11:01
要学好这些还真不容易呢。
任何体系，都有自己的一大套标准 马黑黑 发表于 2023-11-15 18:19
谢分
当个吃瓜的也不错哈{:4_173:} 樵歌 发表于 2023-11-17 10:35
当个吃瓜的也不错哈
瓜香瓜甜，回味绵绵 马黑黑 发表于 2023-11-16 12:10
任何体系，都有自己的一大套标准
这也是这些体系的严谨之处。 红影 发表于 2023-11-17 22:09
这也是这些体系的严谨之处。
都各有考量 马黑黑 发表于 2023-11-17 22:24
都各有考量
想去使用，就必须学习。 红影 发表于 2023-11-18 12:34
想去使用，就必须学习。
那自然 马黑黑 发表于 2023-11-18 12:38
那自然
守规矩在代码里尤其明显{:4_173:}
页:
[1]
2