08——<use><defs>标签创建图形引用
在 js中,当我们需要重复使用一个字段,会将它定义为一个变量,在多个地方使用
在svg中,当我们需要重复使用一个图形时,要怎么处理呢?
一、通过<use>&<defs>标签,在html中直接使用
使用方式:
- 将图形等放在
<defs>
中提前定义好,并设置id
(defs中可设置多个) - 用
<use>
标签的xlink:href
属性指定对应的 id - 注意,
defs
中的内容并不会直接渲染,在使用时才会渲染
<svg><defs><polygon id="star" points="0 0 50 0 25 50" fill="blue" transform="scale(1)"></polygon><!-- 多个平铺 --><polygon id="test"></polygon></defs><use xlink:href="#star"></use>
</svg>
二、也可以在js中生成引用,来看实例
前面03篇讲到,可以用js创建svg,同样的use也可以用js创建。直接来看一个综合实例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>use标签的使用</title><style>html, body {margin: 0;padding: 0;width: 100%;height: 100%;background: #001122;/* svg标签是内联元素,撑满了会有滚动条出来,不想要这个滚动条所以需要重置这两个值 */line-height: 0;font-size: 0;}</style>
</head>
<body><svg width="100%" height="100%" viewBox="-400 -300 800 600" preserveAspectRatio="xMidYMid slice"><defs><polygon id="star" points="0 -10 2 -2 10 0 2 2 0 10 -2 2 -10 0 -2 -2" fill="white"></polygon></defs><!-- 星星 --><g id="star-group"></g></svg></body><script>// nameSpacevar SVG_NS = 'http://www.w3.org/2000/svg'var XLINK_NS = 'http://www.w3.org/1999/xlink'var paper = document.querySelector('svg')renderStar()// 通过一个已有元素,生成它的引用: <use xlink:href="#star"></use>function use(origin) {var _use = document.createElementNS(SVG_NS, 'use')_use.setAttributeNS(XLINK_NS, 'xlink:href', '#' + origin.id)return _use}// 获得任意两个数 之间的 随机数function random (min, max) {return min + (max - min) * Math.random()}// 渲染星空function renderStar () {var starRef = document.getElementById('star')var starGroup = document.getElementById('star-group')var starCount = 500var starwhile( starCount -- ) {// 生成star的引用star = use(starRef)// 设置透明度star.setAttribute('opacity', `${random(0.1, 0.5)}`)// 设置transform值(translate、scale之间无分号)// polygon内部如果使用transform,会在父级use变换的基础上,继续进行变换(没有覆盖,只是继续进行)star.setAttribute('transform', `translate(${random(-400, 400)}, ${random(-300, 300)})scale(${random(0.1, 0.5)})`)// 追加进去starGroup.appendChild(star)}}
</script>
</html>
这样我们就得到了一个星空~
三、defs的其他用法
defs中除了可以定义图形
,也可以定义 渐变效果
,只是使用时就不通过use了
我们下一篇一起来学习 渐变
08——<use><defs>标签创建图形引用相关推荐
- GEE系列:第10单元 使用 Google 地球引擎创建图形用户界面【GUI开发】
GEE从入门到实战的10个系列单元: GEE系列:第1单元 Google地球引擎简介 GEE系列:第2单元 探索数据集 GEE系列:第3单元 栅格遥感影像波段特征及渲染可视化 GEE系列:第4单元 ...
- web前段学习day_01:HTML(学习如何搭建页面结构和内容):文本标签、列表标签、图片标签、超链接、表格、表单表单、分区标签、实体引用
学习如何构造页面结构和内容 安装HBuilderX 一.HTML 创建第一个HTML页面 写完html后如何测试 写在body中的常见标签有哪些? 注释快捷键 Ctrl+Shift+/ 1.文本相关标 ...
- Spring in Action 4 读书笔记之使用标签创建 AOP
目录 1. 定义一个 aspect 2. 创建一个 around advice 在之前的读书笔记 Spring in Acton 4 读书笔记之 AOP 原理及 Spring 对 AOP 的支持 中, ...
- 从对象创建和引用小议解耦
转自:http://www.ibm.com/developerworks/cn/java/j-lo-decoupling/ 解耦是软件设计领域中一个永恒不变的话题,在软件设计过程中,为了最大程度降低各 ...
- 动态创建表格给同一个标签创建点击事件并让点击事件操作内容不一样
动态创建表格给同一个标签创建点击事件,每个点击事件操作的元素不一样. 现在有这样的需求,点击"查看详细"显示或隐藏标签.要实现这样的效果就要给点击标签添加两个属性,一个属性是nam ...
- matlab 创建图形对象,创建坐标轴图形对象
说明 axes 使用默认属性值在当前图形中创建坐标轴图形对象.axes 是用于创建坐标轴图形对象的低级函数.如果坐标轴不存在,当您发出用来创建图形的命令时,MATLAB® 会自动创建一套坐标轴. ax ...
- tomcat中request对象是被创建的_Python中对象的创建与引用
上文传送门,又见面向对象,不变的是思想,变的只是语言. 今日开始,我们深入来了解面向对象. 四.创建与引用 1.创建对象的流程 在创建对象时,看不见的手,帮我们做了三件事情,如下图: 1class S ...
- 如何从标签创建新分支?
本文翻译自:How to create a new branch from a tag? I'd like to create a new master branch from an existing ...
- PatterNodes for Mac(创建图形矢量模式工具)
PatterNodes mac版是Macos上一款创建图形矢量模式工具,主要用于参数图形和插图,pattermodes mac下载能轻松帮助用户创建图形模式,可以将进行颜色.间距.缩放.旋转等调整,支 ...
- VML编程之------group集合容器.vmlframe图形引用 ----《VML极道教程》原著:沐缘华
VML极道教程> 原著:沐缘华 1章16节:group集合容器 1:group集合容器 - 实例讲解 该标记不是用来输出某种图形的.运行时其本身也不可见,而且也没有专用属性,只有VML通用属性, ...
最新文章
- 思科交换机Debug调试命令
- Data Structure_Sort Algorithm
- “金主爸爸快回来交学费吧!”疫情让中国留学生难以返校,国外高校面临资金短缺...
- 【Camera专题】Qcom-高通OTP完全调试指南-上
- 【CV秋季划】生成对抗网络GAN有哪些研究和应用,如何循序渐进地学习好?
- Android 网络请求HttpURLConnection 和 HttpClient详解
- 网络上经典的DOS小命令
- 10天学安卓-第九天
- (2) nginx信号量
- 电脑关闭计算机怎么重启计算机,教您电脑关机后总是重启怎么办
- 【剑指offer】面试题32 - III:从上到下打印二叉树 III(Java)
- 关于redis的db的使用几号db的问题
- 数仓开发神器--DBeaver
- ubuntu学习日记--Lesson6:shell,bash,dash
- php什么是同源策略,javascript - 绕过同源策略的方法
- jQuery计算时间差和阴阳历转换
- 个人应对冲突的五种策略
- c语言转为or1200汇编语言,gogo全站-官网首页
- unity 自动寻路
- OpenLayers 3实践与原理探究3-ol3一个完整的例子