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>

SVG笔记

<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...
SVG笔记

重复动画

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图形生成工具

svg

相关推荐