Home / Blog / it

SVG入门笔记

Author: Vic.Wang 2016/11/23 Tags:svg矢量svg入门矢量图形

这几天在看《SVG精髓》,顺便记点学习笔记。

文档结构:

    <?xml version="1.0"?>
    <!DOCTYPE svg public "-//W3C//DTD SVG1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg width="140" height="170" xmlns="http://www.w3.org/2000/svg">
        <title>title</title>
        <desc>desc</desc>
        <!-- 在这里绘制图像 -->
    </svg>
                    

基本形状:

直线 line:

使用 <line> 元素画直线,需要指定起点坐标(x1, y1)和终点坐标(x2, y2),坐标可以带单位也可以不带单位。

    <svg width="200" height="200">
        <!-- 水平线段 -->
        <line x1="40" y1="20" x2="80" y2="20" style="stroke: black;" />

        <!-- 垂直线段 -->
        <line x1="0.7cm" y1="1cm" x2="0.7cm" y2="2.0cm" style="stroke: black;" />

        <!-- 对角线段 -->
        <line x1="30" y1="30" x2="85" y2="85" style="stroke: black;" />
    </svg>
                    

矩形 rect:

矩形是最简单的基本形状,只需要指定其左上角的 x 和 y 坐标以及它的宽度和高度即可。矩形内部会使用 fill 属性进行颜色填充,如果没有指定 fill 颜色,会使用黑色填充。fill 指定为 none 时,不填充矩形内部。

    <!-- 内部填充为黑色,不绘制边框 -->
    <rect x="10" y="10" width="30" height="50" />

    <!-- 内部不填充颜色,绘制黑色边框 -->
    <rect x="50" y="10" width="30" height="50" style="fill: none; stroke: black;" />

    <!-- 内部填充为蓝色,绘制较粗的边框 -->
    <rect x="100" y="10" width="30" height="45" style="fill: #000; stroke: red; stroke-width: 6;" />

    <!-- 内部填充为蓝色,绘制较粗的、半透明红色边框 -->
    <rect x="150" y="10" width="25" height="45" style="fill: #0000ff; stroke: red; stroke-width: 6; stroke-opacity: 0.5;" />

    <!-- 内部填充为半透明的黄色,用虚线绘制绿色边框 -->
    <rect x="200" y="10" width="35" height="45" style="fill: yellow; fill-opacity: 0.5; stroke: green; stroke-width: 2; stroke-dasharray: 5 2;" />
                    

圆角矩形:

如果希望得到一个圆角矩形,可以分别指定 x 方向和 y 方向的圆角半径,rx 的最大值时矩形宽度的一半,ry 的最大值是矩形高度的一半。如果只指定了 rx 或者 ry 中的一个值,则认为它们相等。

    <!-- rx和ry相等-->
    <rect x="10" y="10" width="30" height="60" rx="2" ry="2" style="stroke: black; fill: none;" />
    <rect x="100" y="10" width="30" height="60" rx="5" style="stroke: black; fill: none;" />
    <rect x="200" y="10" width="30" height="60" rx="10" style="stroke: black; fill: none;" />

    <!-- rx和ry不相等 -->
    <rect x="300" y="10" width="30" height="60" rx="10" ry="5" style="stroke: black; fill: none;" />
    <rect x="400" y="10" width="30" height="60" rx="5" ry="10" style="stroke: black; fill: none;" />
                    

圆形 circle:

要画一个圆,需要使用 circle 元素,并指定圆心的 x 和 y 坐标,以及半径 r 。在不指定 fill 和 stroke 的情况下,圆会使用黑色填充并且没有边框。

    <circle cx="30" cy="30" r="20" style="stroke: black; fill: none" />
                    

椭圆 ellipse:

椭圆除了指定圆心坐标外,还需要分别指定 x 方向的半径 rx 和 y 方向的半径 ry 。

    <ellipse cx="30" cy="30" rx="10" ry="20" style="stroke: black; fill: none;" />
                    

多边形 polygon:

polygon 元素可以用来画任意封闭图形,使用时需要为 points 属性指定一系列的 x/y 坐标对,并用逗号或者空格分隔。表示坐标的数字个数必须是偶数。指定坐标时不需要在最后指定返回起始坐标,因为图形时封闭的,会自动回到起始坐标。

    <!-- 平行四边形 -->
    <polygon points="15,10 55,10 45,20 5,20" style="fill: red; stroke: black;" />

    <!-- 五角星 -->
    <polygon points="35,37.5 37.9,46.1 46.9,46.1 39.7,51.5 42.3,60.1 35,55 27.7, 60.1 30.3,51.5 23.1,46.1 32.1,46.1" style="fill: #ccffcc; stroke: green;" />

    <!-- 不规则图形 -->
    <polygon points="60 60, 65 72, 80 60, 90 90, 72 80, 72 85, 50 95" style="fill: yellow; fill-opacity: 0.5; stroke: black; stroke-width: 2;" />
                    

SVG 有两种判断某个点是否在多边形中的规则,使用 fill-rule 属性,值为 nonzero(默认值)和 evenodd,选择不同的规则会有不同的效果。

    <polygon style="fill-rule: nonzero;" />
    <polygon style="fill-rule: evenodd;" />
                    

折线 polyline:

折线由多段直线组成,用法和 polygon 多边形类似。

    <polyline points="5 20, 20 20, 25 10, 35 30, 45 10, 55 30, 65 10, 75 30, 80 20, 95 20" />
                    

使用 polyline 时最好将 fill 属性设为 none,否则可能会出现上面第二个图形那样。

属性特性:

stroke 笔画颜色

支持颜色关键字、十六进制颜色、rgb颜色,其他的CSS3标准中的颜色(rgba, hsl, hsla, transparent)存在兼容问题。不指定画笔颜色,将看不到任何线,stroke属性默认是 none 。

    <line stroke="red" />

    <line style="stroke: red;" />
    <line style="stroke: #f00;" />
    <line style="stroke: #ff0000;" />
                    

stroke-width 笔画粗细

笔画的位置是在网格线的正中间,可以用 shape-rendering 来控制反锯齿特性,取值为 crispEdges 时会关闭反锯齿特性,取值为 geometricPrecision 则会使边缘圆滑。

    <line stroke-width="5" />

    <line style="stroke-width: 10px;" />
                    

stroke-opacity 笔画不透明度

控制笔画线条的不透明度,取值范围为 0.0 ~ 1.0 ,0代表完全透明,1代表完全不透明。小于0的值会被更改为0,大于1的值会被更改为1。

    <line stroke-opacity="0.2" />

    <line style="stroke-opacity: 0.2;" />
                    

stroke-dasharray 点线或虚线

由一列数字构成,代表线的长度和空隙的长度,数字之间用逗号或空格分隔。数字的个数应为偶数,如果指定的数字个数为奇数,SVG会重复一次,使总个数变成偶数。

    <line stroke-dasharray="9, 5" />

    <line style="stroke-dasharray: 9, 5;" />
                    

sroke-linecap 线帽和线连接

指定不同的值来确定线的头尾形状,可能的取值为 butt(默认值)、round、square。round 和 square 在起止位置都超过了真实位置,butt 则精确地与起止位置对齐。

    <line style="stroke-linecap: butt;" />
    <line style="stroke-linecap: round;" />
    <line style="stroke-linecap: square;" />
                    

stroke-linejoin

通过 stroke-linejoin 属性来指定线段在图形棱角处交叉时效果,取值为 miter(尖的)、round(圆的)、bevel(平的)

    <polyline style="stroke-linejoin: miter;" />
    <polyline style="stroke-linejoin: round;" />
    <polyline style="stroke-linejoin: bevel;" />
                    

stroke-miterlimit

相交处显示宽度与线宽地最大比例,默认值为4。

fill

填充颜色,默认 black 黑色。

    <polyline style="fill: red;" />
                    

fill-opacity

填充不透明度,从 0.0 到 1.0的数字,0.0 完全透明, 1.0(默认值)完全不透明。

    <polyline style="fill-opacity: 0.8;" />