SVG图形滤镜

SVG有提供Filter(滤镜)这个东西,可以用来在SVG图形上加入特殊的效果,像是图形模糊化、产生图形阴影、将杂讯加入图形等。以下介绍的是图形模糊化、产生图形阴影这2个滤镜效果。

SVG图形滤镜_第1张图片

 

浏览器对于SVG Filter的支援

SVG : 滤镜

(仅列出部分有使用到的属性)

    • height : 整个图形(画布)的原始长度
    • width: 整个图形(画布)的原始宽度
    • defs是definitions(定义)的简写,用来存放SVG特殊元素的定义,像是filter
    • 滤镜的本体,设定滤镜套用后的实际效果
    • id: filter的名称
    • x: filter的x坐标
    • y: filter的y坐标

    (也有width、height)

    • ...
    • filter: 要套用的滤镜

范例1 - 套用模糊滤镜

SVG图形滤镜_第2张图片

(左边有套用滤镜,右边是原始图形)


    
        
             
        
    
    
    

 feGaussianBlur的SourceGraphic表示将整个图形来源(rect)都套用滤镜

  1. filter="url(#滤镜名称)"

范例2 - 产生阴影效果

SVG图形滤镜_第3张图片

 (左边有套用滤镜,右边是原始图形)

    • in: 套用滤镜效果的图形来源
    • dx: 图形在x坐标上的位移
    • dy: 图形在y坐标上的位移
    • result: 套用滤镜后的结果名称
    • in: 套用滤镜效果的图形来源1
    • in2: 套用滤镜效果的图形来源2
    • mode: 图形混和的模式

feOffset的功能是将原始图形进行位移,feBlend的功能则是将位移后的图形和原始图形混和在一起。
如果filetr的width、height没有设定的比rect大一些,会造成部分滤镜阴影效果消失。


    
        
            
            
        
    
    
    

范例3 - 产生阴影效果+阴影模糊化


SVG图形滤镜_第4张图片

 

(左边有套用滤镜,右边是原始图形)

可以把位移后的图形结果(offOut)再套用模糊滤镜,最后将模糊后的结果(blurout)与原始图形(SourceGraphic)混和在一起。


    
        
            
            
            
        
    
    
    

你可能感兴趣的:(数学建模,java,开发语言)