永发信息网

svg feGaussianBlur 兼容性求助

答案:1  悬赏:80  手机版
解决时间 2021-11-28 23:26
  • 提问者网友:不要迷恋哥
  • 2021-11-28 19:11
svg feGaussianBlur 兼容性求助
最佳答案
  • 五星知识达人网友:往事隔山水
  • 2021-11-28 19:56
SVG
SVG 指伸缩矢量图形 (Scalable Vector Graphics)
SVG 用定义用于网络基于矢量图形
SVG 使用 XML 格式定义图形
SVG 图像放或改变尺寸情况其图形质量所损失
SVG 万维网联盟标准
SVG 与诸 DOM XSL 类 W3C 标准整体

与其图像格式相比使用 SVG 优势于:
SVG 非工具读取修改(比记事本)
SVG 与 JPEG GIF 图像比起尺寸更且压缩性更强
SVG 伸缩
SVG 图像任何辨率高质量打印
SVG 图像质量降情况放
SVG 图像文本选同搜索(适合制作图)
SVG 与 Java 技术起运行
SVG 放标准

SVG 文件纯粹 XML

代码结构
[html] view plain copy print?

This is an HTML paragraph

stroke-width="2" fill="red" />

SVG提供预定义形状元素使用操作:

标签用创建矩形及矩形变种

x="20" y="20" rx="20" ry="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9"/>
代码解释:
1)rect 元素 width height 属性定义矩形高度宽度
2)style 属性用定义 CSS 属性
3)CSS fill 属性定义矩形填充颜色(rgb 值、颜色名或者十六进制值)
4)CSS stroke-width 属性定义矩形边框宽度
5)CSS stroke 属性定义矩形边框颜色
6)x 属性定义矩形左侧位置(例x="0" 定义矩形浏览器窗口左侧距离 0px)
7)y 属性定义矩形顶端位置(例y="0" 定义矩形浏览器窗口顶端距离 0px)
8)CSS fill-opacity 属性定义填充颜色透明度(合范围:0 - 1)
9)CSS stroke-opacity 属性定义笔触颜色透明度(合范围:0 - 1)
10)rx ry 属性使矩形产圆角

标签用创建圆

代码解释:
1)cx cy 属性定义圆点 x y 坐标省略 cx cy圆设置 (0, 0)
2)r 属性定义圆半径

标签用创建椭圆

代码解释:
1)cx 属性定义圆点 x 坐标
2)cy 属性定义圆点 y 坐标
3)rx 属性定义水平半径
4)ry 属性定义垂直半径

标签用创建线条

代码解释:
1)x1 属性 x 轴定义线条始
2)y1 属性 y 轴定义线条始
3)x2 属性 x 轴定义线条结束
4)y2 属性 y 轴定义线条结束

标签用创建含少于三边图形

代码解释:
1)points 属性定义边形每角 x y 坐标

标签用创建仅包含直线形状

代码解释:
1)points 属性定义每段线每角 x y 坐标

标签用定义路径

面命令用于路径数据:
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
Z = closepath
注释:所命令均允许写字母写表示绝定位写表示相定位

SVG 滤镜 用滤镜:
feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset
feSpecularLighting
feTile
feTurbulence
feDistantLight
fePointLight
feSpotLight

Gaussian Blur高斯模糊
标签用定义 SVG 滤镜 标签使用必需 id 属性定义向图形应用哪滤镜
标签必须嵌套 标签内 标签 definitions 缩写允许诸滤镜等特殊元素进行定义

代码解释:
1) 标签 id 属性滤镜定义唯名称(同滤镜文档元素使用)
2)filter:url 属性用元素链接滤镜链接滤镜 id 必须使用 # 字符
3)滤镜效通 标签进行定义fe 缀用于所滤镜
4) 标签 stdDeviation 属性定义模糊程度
5)in="SourceGraphic" 部定义由整图像创建效

用定义 SVG 线性渐变

标签必须嵌套 内部 标签 definitions 缩写诸渐变类特殊元素进行定义
线性渐变定义水平、垂直或角形渐变:
1) y1 y2 相等 x1 x2 同创建水平渐变
2) x1 x2 相等 y1 y2 同创建垂直渐变
3) x1 x2 同且 y1 y2 同创建角形渐变

代码解释:
1) 标签 id 属性渐变定义唯名称
2)fill:url(#orange_red) 属性 ellipse 元素链接渐变
3) 标签 x1、x2、y1、y2 属性定义渐变始结束位置
4)渐变颜色范围由两种或种颜色组每种颜色通 标签规定offset 属性用定义渐变始结束位置

用定义放射性渐变

标签必须嵌套 标签 definitions 缩写允许诸渐变等特殊元素进行定义

代码解释:
1)
标签 id 属性渐变定义唯名称fill:url(#grey_blue) 属性 ellipse 元素链接渐变cx、cy
r 属性定义外圈 fx fy 定义内圈 渐变颜色范围由两种或种颜色组每种颜色通
标签规定offset 属性用定义渐变始结束位置

svg提供g元素元素组织起元素由g元素编组起设置相同颜色进行坐标变换

[html] view plain copy print?
xmlns="">

H
我要举报
如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息,可以点下面链接进行举报!
点此我要举报以上问答信息
大家都在看
推荐资讯