svg的介绍

SVG英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形，是一种图像文件格式；SVG还是一种用XML定义的语言，可以用来描述二维矢量及矢量或栅格图形。

●SVG 指可伸缩矢量图形 (Scalable Vector Graphics)

●SVG 用来定义用于网络的基于矢量的图形

●SVG 使用 XML 格式定义图形

●SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失

●SVG 是万维网联盟的标准

●SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

  <!-- 绘制图形 -->

    <svg width="200" height="200">

        <!-- 矩形标签 -->

        <rect x="50" y="20" width="100" height="100" fill="pink" stroke="aqua" stroke-width="2" opacity="0.5" rx="10"

            ry="10" />

    </svg>

    <svg width="200" height="200">

        <!-- 圆形标签 -->

        <circle cx="100" cy="100" r="20" fill="red" stroke="pink" stroke-width="2" opacity="0.5" />

    </svg>

    <!-- 线条绘制 -->

    <svg width="200" height="200">

        <line x1="0" y1="0" x2="100" y2="100" stroke="pink" stroke-width="2" />

    </svg>

    <svg width="200" height="200">

        <!-- <line x1="0" y1="0" x2="100" y2="100" stroke="pink" stroke-width="2"/> -->

        <!-- 多线条 -->

        <polygon points="50,50 120,80 150,130" fill="lime" stroke="purple" stroke-width="3" />

    </svg>

    <!-- 文本绘制 -->

    <svg width="200" height="200">

        <text x="10" y="20" fill="green">

            我是svg

            <tspan x="30" y="50">

                我是svg1

            </tspan>

        </text>

    </svg>

    <!-- 跳转 -->

    <svg xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">

        <a xlink:href="b.html" target="_black">

            <text x="10" y="20" fill="brown">我是svg3</text>

        </a>

    </svg>

    <!-- 绘制路径 -->

    <svg width="450" height="400">

        <!--  d属性是绘制命令 M命令定义绘制图形的起点坐标 L命令用来绘制一条直线  命令大写字母表示绝对定位 小写字母表示相对定位  绝对定位是相对于顶点的位置 相对位置相对于上一个点绘制 -->

        <!-- 绘制一条贝赛尔曲线 -->

        <path d="M100 350 l150 -300" stroke="pink" stroke-width="3" fill="none" />

        <path d="M250 50 l150 300" stroke="pink" stroke-width="3" fill="none" />

        <path d="M175 200 l150 0" stroke="orange" stroke-width="3" fill="none" />

        <path d="M100 350 q150 -300 300 0" stroke="brown" stroke-width="3" fill="none" />

    </svg>

    <!-- 描边属性 -->

    <svg width="300" height="200">

        <!-- stroke笔画属性 stroke-width笔画宽度属性 stroke-linecap笔画笔帽属性 stroke-dasharray虚线笔画属性 -->

        <!-- 公共标签 stroke-linecap有三个值默认 圆的 方的-->

        <g fill="none" stroke="purple" stroke-width="5">

            <path stroke-linecap="butt" d="M5 20 l200 0"  />

            <path stroke-linecap="round" d="M5 40 l200 0"  />

            <path stroke-linecap="square" d="M5 60 l200 0"  />

        </g>

        <!-- stroke-dasharray 虚线之间的空隙距离最少两个值 -->

        <g fill="none" stroke="purple" stroke-width="3">

            <path stroke-dasharray="5,5" d="M5 80 l200 0"  />

            <path stroke-dasharray="10,10" d="M5 100 l200 0"  />

            <path stroke-dasharray="20,10,5,5,5,10" d="M5 120 l200 0"  />

        </g>

    </svg>

    <!-- 模糊和阴影效果 -->

    <svg width="200" height="200">

    </svg>