SVG Shapes

来源：互联网发布：淘宝店标尺寸是多少编辑：程序博客网时间：2024/05/17 03:05

SVG有一些预定义的形状元素，可被开发者使用和操作：

矩形 <rect>
圆形 <circle>
椭圆 <ellipse>
线 <line>
折线 <polyline>
多边形 <polygon>
路径 <path>

矩形

<rect width="300" height="100"

style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>

</svg>

rect 元素的 width 和 height 属性可定义矩形的高度和宽度
style 属性用来定义 CSS 属性
CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
CSS 的 stroke-width 属性定义矩形边框的宽度
CSS 的 stroke 属性定义矩形边框的颜色

<rect x="50" y="20" width="150" height="150"

style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;

stroke-opacity:0.9"/>

</svg>

x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）
y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px）
CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
CSS 的 stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1）

<rect x="50" y="20" width="150" height="150"

style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5"/>

</svg>

The CSS opacity property defines the opacity value for the whole element (legal range: 0 to 1)

</svg>

rx 和 ry 属性可使矩形产生圆角。

圆形

<circle cx="100" cy="50" r="40" stroke="black"

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

</svg>

cx和cy属性定义圆点的x和y坐标。如果省略cx和cy，圆的中心会被设置为(0, 0)
r属性定义圆的半径

椭圆

<ellipse cx="300" cy="80" rx="100" ry="50"

style="fill:yellow;stroke:purple;stroke-width:2"/>

</svg>

CX属性定义的椭圆中心的x坐标
CY属性定义的椭圆中心的y坐标
RX属性定义的水平半径
RY属性定义的垂直半径

直线

<line x1="0" y1="0" x2="200" y2="200"

style="stroke:rgb(255,0,0);stroke-width:2"/>

</svg>

x1 属性在 x 轴定义线条的开始
y1 属性在 y 轴定义线条的开始
x2 属性在 x 轴定义线条的结束
y2 属性在 y 轴定义线条的结束

多边形

<polygon points="200,10 250,190 160,210"

style="fill:lime;stroke:purple;stroke-width:1"/>

</svg>

在points中一个逗号分隔一个坐标

路径

<path> 元素用于定义一个路径。

下面的命令可用于路径数据：

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

注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

</svg>

l相对路径

http://www.mhjblog.com/newsshow.php?id=104

参看这个地址讲解的更详细些。

SVG Stroke属性

stroke
stroke-width
stroke-linecap
stroke-dasharray

SVG滤镜

SVG可用的滤镜有:

feBlend - 与图像相结合的滤镜
feColorMatrix - 用于彩色滤光片转换
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset - 过滤阴影
feSpecularLighting
feTile
feTurbulence
feDistantLight - 用于照明过滤
fePointLight - 用于照明过滤
feSpotLight - 用于照明过滤

SVG模糊效果

</svg>

<filter>元素id属性定义一个滤镜的唯一名称
<feGaussianBlur>元素定义模糊效果
in="SourceGraphic"这个部分定义了由整个图像创建效果
stdDeviation属性定义模糊量
<rect>元素的滤镜属性用来把元素链接到"f1"滤镜

0 0