svg之defs以及use的使用

首先说需求：要求做一个可复制拉伸的线，也就是不是伸长，而是复制
类似下图：拉伸之前

拉伸之后：

那么这是怎么做到呢？下面来说一说
首先需要了解svg的defs以及use是什么

SVG的元素用于预定义一个元素使其能够在SVG图像中重复使用。例如你可以将一些图形制作为一个组，并用元素来定义它，然后你就可以在SVG图像中将它当做简单图形来重复使用 ---------------------声明
SVG 元素可以在SVG图像中多次重用一个预定义的SVG图形，包括元素和元素。被重用的图形可以在定义的内部（图形将不可见直到使用use来引用它）或外部-------------------引用
可操作拉伸的svg的结构如下图

很明显上面defs 声明要重复使用的标签
下边use 通过id 引用defs声明的标签
那么在调用鼠标移动拉伸事件的时候就可以根据宽度来进行判断是否需要再创建use

var _use = document.createElementNS(par.SVG_NS, 'use');
_use.setAttributeNS(par.XLINK_NS,'xlink:href','#'+origin.id);if(usel){_use.setAttribute('transform','translate('+usetranslate+' 0)'); // 需要位移，否则会重叠};

svg之defs以及use的使用相关推荐

前端切图之svg图标的复用基于defs和use 亲测有用
切图网长期致力于web前端开发外包服务,而我们也关注到现在图标很多时候采用svg更多一点,然后图标字体文件已经提供了很多种类的图标,不过采用svg图标可以自行选择更符合.更好看的图标,相比于字体图标更 ...
html2d动画,HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
交互性 SVG拥有良好的用户交互性,例如: 1. SVG能响应大部分的DOM2事件. 2. SVG能通过cursor良好的捕捉用户鼠标的移动. 3. 用户可以很方便的通过设置svg元素的zoomAnd ...
SVG滤镜对图片调色
色彩基础色彩学是一门综合学科,春节利用闲暇时间看过几本相关书籍,本打算写一篇文章的,但是发现自己知道的东西太少,所以这里会做一些简单的讲解.首先,是大家都耳熟能详的一个概念三原色.这里主要针对色光三 ...
SVG阴影、滤镜、渐变
一.SVG阴影 <defs>和<filter> 所有lnternst 滤镜都在<defs>元素中定义. <defs>元素是定义的缩写,包含特殊元素(例如 ...
svg动画，渐变，阴影
SVG 与 Canvas 两者间的区别 SVG 是一种使用 XML 描述 2D 图形的语言. Canvas 通过 JavaScript 来绘制 2D 图形. svg不会失帧,canvas在js中调用方 ...
SVG基本使用（二常用属性、绘制路径/文本/超链接/图片、结构标签）
一.SVG常用属性 1.fill: 修改填充颜色 2.fill-opacity: 0~1 设置填充颜色的透明度 3.stroke: 修改描边颜色 4.stroke-width: 修改描边宽度 5.st ...
前端SVG基础与深入01
SVG入门01 引言图形图像入门 1. 在前端中我们通常说的像素是什么 2. 为什么使用svg,栅格化图片与矢量图的区别 SVG入门 1. 坐标系统 1.1. 视图 1.2 viewport与vi ...
SVG颜色、渐变和填充
SVG颜色.渐变和填充颜色 RGB和HSL都是CSS3支持的颜色表示方法,一般普遍使用是RGB.PS:HSL浏览器兼容. RGB RGB即是代表红.绿.蓝三个通道的颜色,通过对红(R).绿(G).蓝 ...
d3.js实现隐藏部分关系
如果用d3画人物图的话,这个问题会经常遇到. 例如:人物A和人物B之间的关系有:同学.亲戚.同事:人物A和人物C之间的关系有:同学.同事: 需求:不想看到亲戚关系.(为什么会有这样的需求:节点多了后, ...
d3.js 共享交换平台demo
今天在群里遇到一张图遂来玩一玩,先来上图!! 点击相应按钮,开关线路,此项目的重点是计算相应图形的位置,由于是个性化项目就没有封装布局.好了直接上代码. <!DOCTYPE html> ...

svg之defs以及use的使用

svg之defs以及use的使用相关推荐

最新文章

热门文章