SVG笔记

SVG.<text/>文字的长度

• SVGTextElement.getBBox() ==> 然后得到 宽 和 高
• SVGTextElement.getComputedTextLength() ==> 这个是得到 宽 的函数，貌似没有得到 高 的函数...(我把 SVGTextElement 的所有属性都打印出来了，貌似也没找到对应的计算高的函数)

参考：https://stackoverflow.com/que...
https://stackoverflow.com/que...

getBoundingClientRect()

getBoundingClientRect用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。
getBoundingClientRect是DOM元素到浏览器可视范围的距离（不包含文档卷起的部分）。

该函数返回一个Object对象，该对象有6个属性：top,lef,right,bottom,width,height；

这里的top、left和css中的理解很相似，width、height是元素自身的宽高，但是right，bottom和css中的理解有点不一样。right是指元素右边界距窗口最左边的距离，bottom是指元素下边界距窗口最上面的距离。

var box=document.getElementById('box');         // 获取元素

alert(box.getBoundingClientRect().top);         // 元素上边距离页面上边的距离

alert(box.getBoundingClientRect().right);       // 元素右边距离页面左边的距离

alert(box.getBoundingClientRect().bottom);      // 元素下边距离页面上边的距离

alert(box.getBoundingClientRect().left);        // 元素左边距离页面左边的距离

滤镜

<filter>

<filter>标签用来定义滤镜，滤镜必须含有id属性来标识滤镜。图形元素通过filter=url(#id)来引用滤镜。

以前<filter>标签要包含在<defs>标签中，现在也可以直接定义而不用<defs>标签

　滤镜原语

• feBlend

• feColorMatrix
• feComponentTransfer
• feComposite: 是为数不多的几个需要两个输入的滤镜原语之一。它运用了Porter-Duff合成来组合两张图像。feComposite可以用于掩蔽或裁剪元素
• feConvolveMatrix: 主要是帮助你创建自己的滤镜。总之，你会定义一个会根据其相邻像素的值变化的像素栅格（一个内核矩阵）。这样一来，你就可以创建自己的滤镜效果，如模糊、锐化滤镜，或投影。
• feDiffuseLighting
• feDisplacementMap
• feFlood
• feGaussianBlur
• feImage
• feMerge
• feMorphology: 把输入加厚(operator="dilate")或变薄(operator="erode")的原语——因此，非常适合用来创建轮廓和边界。
• feOffset
• feSpecularLighting
• feTile
• feTurbulence
• feDistantLight
• fePointLight
• feSpotLight

滤镜原语是SVG滤镜的组成部分。任何一种效果，都至少包含一个原语。一个原语通常包含一个或两个输入（in，in2属性，用来提供基元来源），以及一个输出（result）。原语输入包括模糊、移动、填充、结合或扭曲等等。
示例：

https://codepen.io/AlexZ33/pe...

svg动画

https://codepen.io/AlexZ33/pe...

重复动画

fill被设置为freeze使动画保持在最后阶段。如果想要对象返回到动画起始阶段，去除掉fill。(或者fill为remove)

• repeatCount: 整型值或indefinite ---> 重复对少次
• repeatDur： 持续多长时间

https://codepen.io/AlexZ33/pe...

高斯模糊

参考

https://blog.csdn.net/chy555c...
https://www.w3cplus.com/svg/w...
svg dropshadow实现
SVG 快速入门
SVG 动画精髓
svg图形生成工具