SVG 基本语法

1. 概述

        svg为可缩放矢量图形，使用 XML 格式定义图像。

2. 基础图形

2.1 矩形

（1） 基础语法

<rect x="20" y="20" rx="20" ry="20" width="150" height="100" fill="red" stroke="black" stroke-width="5" opacity="0.5"/>

独有属性如下：

        x、y ：矩形左上角位置坐标，可省略，默认为原点(0,0)。

        rx、ry：可用于设置圆角半径，可省略。默认为直角。

        width、height：矩形的宽和高。

（2）样式

 

2.2 圆形

（1） 基础语法

<circle cx="100" cy="100" r="50" fill="red" stroke="black" stroke-width="5" />

独有属性如下：

        cx、cy：圆心坐标，可省略，默认为原点(0,0)。

        r：圆半径。

（2）样式

2.3 椭圆

（1） 基础语法

<ellipse cx="100" cy="100" rx="50" ry="30" fill="red" stroke="black" stroke-width="5" />

独有属性如下：

        cx、cy：中心坐标，可省略，默认为原点(0,0)。

        rx、ry：椭圆的水平、纵向半径。

（2）样式

2.4 直线

（1） 基础语法

<line x1="50" y1="50" x2="150" y2="150" stroke="red" stroke-width="5" />

独有属性如下：

        x1、y1：起点坐标，可省略，默认为原点(0,0)。

        x2、y2：终点坐标，可省略。省略时，以原点为起点，x1、y1重点。

（2）样式

2.5 多边形

（1） 基础语法

<polygon points="50,50 100,150 150,30 100,20" fill="red" stroke="black" stroke-width="5" />

独有属性如下：

        points：多边形各顶点坐标。成对配置，两对坐标为一条线段。

（2）样式

2.6 折线

（1） 基础语法

<polyline points="50,50 100,150 150,30 100,20" fill="none" stroke="black" stroke-width="5"/>

独有属性如下：

        points：折线各顶点坐标。成对配置，两对坐标为一条线段。

（2）样式

2.7 路径

（1） 基础语法

<path d="M50 50 L100 150 L150 30 Z" fill="none" stroke="black" stroke-width="5"/>

独有属性如下：

        d：路径命令。

（2）常用命令及语法

（3）样式

 2.8 文本

（1） 基础语法

<text x="20" y="50" font-size="30" font-family="黑体" rotate="30" textLength="150">文本示例text>

特有属性如下：

        x、y：文本左上角位置坐标。

        rotate：每个文本字的旋转角度

        dx、dy：文本左上角位置坐标偏移量，文字起始位置为（x+dx, y+dy）

        textLength：设置文本长度。

        lengthAdjust：调整文本的收缩或扩张方式，与textLength属性配合使用，可选值如下：

                spacing：单个文字大小不变，只收缩或扩张间距

                spacingAndGlyphs：单个文字大小不变，只收缩或扩张间距

        text-anchor：改变(x,y)作为起始坐标的定义。可选值如下：

                start：(x,y)为文本的起始坐标。
                middle：(x,y)为文本的中轴坐标。
                end：(x,y)为文本的结束坐标。

        font-family：字体

        font-size：字体大小

        font-style：字体类型

                normal：文本应以普通形式显示。
                italic：文本应以斜体显示。
                oblique：文本应以斜形式显示。

        font-weight：字体粗细。

        font-stretch：设置字形缩合或扩展量

                normal：正常的字形
                wider：宽的
                narrower：窄的
                ultra-condensed：超压缩字形
                extra-condensed：额外压缩字形
                condensed：压缩字形
                semi-condensed：半压缩字形
                semi-expanded：半扩展字形
                expanded：扩展字形
                extra-expanded：额外扩展字形
                ultra-expanded：超扩展字形

                inherit：使用父节点配置
        font-variant：设置小型大写字母的字体

                normal：默认值。浏览器会显示一个标准的字体。
                small-caps：浏览器会显示小型大写字母的字体
                inherit：使用父节点配置

        font-size-adjust：浏览器将调整字体大小，目前只有Firefox支持。

（2）样式

3. 基础属性

4. 变形处理

（1） 基础语法

可使用transform属性对图形进行平移、旋转、缩放等形变。

（2） 可用变形

（3） 示例

<rect width="50" height="50" transform="translate(10,10) skewX(45) skewY(45)"/>

5. defs的应用

5.1 组件

（1） 基础语法

        通过标签定义组件(一组图像)，使用标签使用组件。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" version="1.1">
    <defs>
        <g id="shape">
            <circle cx="10" cy="0"  r="10" fill="red"/>
            <circle cx="10" cy="20" r="10" fill="red"/>
            <circle cx="0"  cy="10" r="10" fill="red"/>
            <circle cx="20"  cy="10" r="10" fill="red"/>
            <rect width="20" height="20" fill="blue"/>
            <circle cx="10"  cy="10" r="5" fill="green"/>
        g>
    defs>
    <use xlink:href="#shape" x="40" y="40" transform="scale(1.5,1.5)" >use>
    <use xlink:href="#shape" x="100" y="100" transform="skewX(10) skewY(10)" >use>
    <use xlink:href="#shape" x="50" y="150" >use>
svg>

（2）可用标签

5.2 滤镜

（1） 基础语法

 通过标签可定义一组滤镜效果。

    <defs>
        <filter id="f1" x="0" y="0" width="50" height="50">
            <feGaussianBlur result="blur" in="SourceGraphic" stdDeviation="5">feGaussianBlur>
        filter>
    defs>
    <rect x="10" y="10" width="50" height="50" fill="wheat" stroke-width="2" stroke="black" filter="url(#f1)"/>

（2） 可用滤镜

（3） 公共属性

（4）特效示例

1. 阴影特效

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" version="1.1">
    <defs>
        <filter id="f1" x="0" y="0" width="50" height="50">
            <feOffset in="SourceGraphic" result="offset" dx="5" dy="5">feOffset>
            <feGaussianBlur result="blur" in="offset" stdDeviation="5">feGaussianBlur>
            <feBlend in="SourceGraphic" in2="blur" mode="normal">feBlend>
        filter>
    defs>
    <rect x="10" y="10" width="50" height="50" fill="wheat" stroke-width="2" stroke="black" filter="url(#f1)"/>
svg>

 

2. 反射二次光效果

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" version="1.1">
    <defs>
        <filter id="f1" x="0" y="0" width="100" height="100">
            <feSpecularLighting in="SourceGraphic" specularExponent="10"  specularConstant="0.75" result="spec">
                    <fePointLight x="10" y="10" z="50" />
            feSpecularLighting>
            <feComposite in="SourceGraphic" in2="spec" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" />
        filter>
    defs>
    <rect x="10" y="10" width="50" height="50" fill="wheat" stroke-width="2" stroke="black" filter="url(#f1)"/>
svg>

 3. 褶皱纸张效果

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" version="1.1">
    <defs>
        <filter id="f1" x="0" y="0" width="50" height="50">
            <feTurbulence type="fractalNoise" baseFrequency='0.04' result='noise' numOctaves="5" />
            <feDiffuseLighting in='noise' lighting-color='#fff' surfaceScale='2' width="50" height="50">
                <feDistantLight azimuth='45' elevation='60' />
            feDiffuseLighting>        
        filter>
    defs>
    <rect x="10" y="10" width="50" height="50" fill="wheat" stroke-width="2" stroke="black" filter="url(#f1)"/>
svg>

5.3 渐变

（1） 基础语法

1

    <defs>
        <linearGradient id="grad" x1="0" y1="100" x2="100" y2="100" gradientUnits="userSpaceOnUse">
            <stop offset="0%" stop-color="blue"/>
            <stop offset="50%" stop-color="red"/>
        linearGradient>
    defs>
    <rect x="0" y="0" width="100" height="100" stroke="green" stroke-width="3"  fill="url(#grad)"/>

1

1

 （2） 可用渐变

5.4 文本路径

（1） 基础语法

    <defs>
        <path id="path" d="M0 20  a1,1 0 0,0 90,0">path>
    defs>
    <text x="20" y="50" fill="black" stroke-width="4" font-size="15" font-weight="900">
        <textPath xlink:href="#path">我们一起去春游。textPath>
    text>

（2）效果

 

5.5 蒙版

（1） 基础语法

通过不同图像的可见度来处理目标图像的显示。

clipPath可通过基础图形、路径、Text剪切图像。区域之内可见，区域之外不可见。

mask中使用颜色来控制透明度：white表示透明度为0，即完全显示；black表示透明度为1，即完全透明

    <defs>
        <clipPath id="clipPath" stroke-width="2" stroke="black">
            
            <rect x="15" y="15" width="40" height="40" fill="black">rect>
        clipPath>
    defs>
    <circle id="circle" cx="25" cy="25" r="20" clip-path="url(#clipPath)" stroke="black" fill="red"  >circle>

    <defs>
        <mask id="myMask">
            
            <rect x="0" y="0" width="100" height="100" fill="white"/>
            
            <path d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z" fill="black"/>
        mask>
    defs>
    <polygon points="-10,110 110,110 110,-10" fill="orange"/>
    
    <circle cx="50" cy="50" r="50" mask="url(#myMask)"/>

 （2） 可用蒙版

5.6 标记

 用于在、、、元素上绘制箭头或者多边标签图形。

    <defs>
        <marker id="arrow" markerWidth="12" markerHeight="13" refX="2" refY="6" orient="auto">
            <path d="M2,2 L2,10 L10,6 L2,2" style="stroke:none;fill:#000000">path>
        marker>
    defs>
    <line x1="30" y1="20" x2="80" y2="60" stroke-width="1" stroke="black" marker-end="url(#arrow)">line>

有属性如下:        

        viewBox：可见区域

        refX、refY：图形和直线连接的坐标点

        markerUnits：标记大小的基准

                strokeWidth：线的宽度

                userSpaceOnUse：线前端的大小

        markerWidth、markerHeight：标签的宽高范围，需要大于等于标记图像的大小，否则图像显示不全。

        orient：绘制的方向，可设为auto(自动确认方向)和角度值

        id：标识id，用于引用。

设置位置的属性如下：
        marker-start: 路径的起点处
        marker-mid: 路径的中间端点处(直线只有起点和终点，所以对直线无用)
        marker-end: 路径的终点处

示例：

5.7 图案填充

    <defs>
        <pattern id="pattern" x="2" y="2" width="6" height="6" patternUnits="userSpaceOnUse" >
            <circle cx="2" cy="2" r="2" stroke="green" fill="red" stroke-width="2"/>
        pattern>
    defs>
    <rect x="0" y="0" width="100" height="100" fill="url(#pattern)"/>

有属性如下: 

        x、y：指定图案的起始坐标。

        width、height：用于填充图案的宽度和高度。可以是相对值（例如百分比）或绝对值（例如像素）。

        patternUnits：一个填充空间的坐标系单位，pattern标签x、y、width、height的单位。

                userSpaceOnUse：引用元素上的坐标值

                objectBoundingBox：引用元素上的边界框的分数或百分比值，所填充的图形的大小可进行缩放。

        patternContentUnits：填充图案的坐标系单位，pattern标签的子标签(基础图像、路径、文本)等的坐标单位。

                userSpaceOnUse：引用元素上的坐标值

                objectBoundingBox：引用元素上的边界框的分数或百分比值，所填充的图形的大小可进行缩放。

示例：

 6. 动画

（1） 基础语法

（2） 可用动画