css svg什么意思,CSS之SVG

一、学习链接

二、简介

【0】SVG 效果预览

image

【1】SVG 的预定义形状

矩形

圆形

椭圆

线

折线

多边形

路径

【2】SVG 的通用标准语法

width：宽度；

height：高度；

fill：填充色；

fill-opacity：填充颜色透明度；

stroke：边框色；

stroke-widt：边框的宽度；

stroke-opacity：边框颜色的透明度；

stroke-linecap：不同类型的开放路径的终结；

stroke-dasharray：边框虚线；

x：左侧位置；

y：顶端位置；

opacity：透明值。

stroke-linecap：

stroke-dasharray：

【3】使用

【3.1】直接写入html中

id="mysvg"

xmlns="http://www.w3.org/2000/svg"

viewBox="0 0 800 600"

preserveAspectRatio="xMidYMid meet"

>

【3.2】写在独立文件中，用、、、等标签插入网页。

【3.3】CSS 中使用 SVG

.logo {

background: url(icon.svg);

}

【3.4】SVG 转为 BASE64 编码，然后作用 DATA URL 写入网页。

三、元素语法

【1】

SVG 代码都放在顶层标签之中，如果只想展示 SVG 图像的一部分，就要指定viewBox属性。

【2】矩形

【3】圆形

CX：圆中心的 x 坐标；

CY：圆中心的 y 坐标；

r：圆的半径。

【4】椭圆

CX：圆中心的 x 坐标；

CY：圆中心的 y 坐标；

RX：水平半径；

RY：垂直半径。

【5】直线

x1：x 轴定义线条的开始；

y1：y 轴定义线条的开始；

x2：x 轴定义线条的结束；

y2：y 轴定义线条的结束。

【6】多边形

【7】曲线

【8】路径

M = moveto

L = lineto

H = horizontal lineto

V = vertical lineto

C = curveto

S = smooth curveto

Q = quadratic Bézier curve

T = smooth quadratic Bézier curveto

A = elliptical Arc

Z = closepath

【9】文本

I love SVG I love SVG

I love SVG I love SVG

四、元素滤镜

【1】 和

元素 id 属性定义一个滤镜的唯一名称；

标签用于自定义形状

【2】模糊

fill="yellow" filter="url(#f1)" />

fill="yellow" filter="url(#f1)" />

【3】阴影

fill="yellow" filter="url(#f2)" />

fill="yellow" filter="url(#f2)" />

【4】线性渐变

【5】放射性渐变

五、更多元素标签

【1】组

圆形

圆形

【2】图案填充

【3】图片

width="100%" height="100%"/>

width="100%" height="100%"/>

【4】动画

attributeName：发生动画效果的属性名。

from：单次动画的初始值。

to：单次动画的结束值。

dur：单次动画的持续时间。

repeatCount：动画的循环模式。