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

    阅读 827

    推荐阅读
    镜心的小树屋
    用户专栏

    方寸湛然GitHub组织地址:[链接]

    47 人关注
    123 篇文章
    专栏主页