前端入门：HTML（SVG.1）

1.绘制文本

transform="rotate(30 20,40)"：代表的是文本的倾斜情况，30代表角度，20,40代表的是以哪个坐标为旋转中心，默认为0,0

案例：

源代码：

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

        <text x="0" y="15" fill="red">I love SVG!</text>

    </svg>

    <br>

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

        <text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG!</text>

    </svg>

    <br>

    <!-- 多行文本 -->

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

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

            Several lines

            <tspan x="10" y="45">First line</tspan>

            <tspan x="10" y="70">Second line</tspan>

        </text>

    </svg>

    <br>

    <!-- 实现点击文本，进行网页的跳转，第一个链接为固定链接 -->

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

        <a xlink:href="http://www.baidu.com" target="_black">

            <text x="10" y="15" fill="red">I love SVG!</text>

        </a>

    </svg>

2.绘制路径

M和L区分大小写：

大写为绝对定位，小写为相对定位：

二次贝塞尔曲线：

绘制贝塞尔曲线：

案例：

源代码：

（注）红色那行是绘制贝塞尔曲线的代码，其余代码为辅助代码，图中蓝色线条就是贝塞尔曲线。

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

        <path d="M 100 350 l 150 -300" stroke="red" stroke-width="3" fill="none" />

        <path d="M 250 50 l 150 300" stroke="red" stroke-width="3" fill="none" />

        <path d="M 175 200 l 150 0" stroke="green" stroke-width="3" fill="none" />

        <path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="3" fill="none" />

        <g fill="black">

            <circle cx="100" cy="350" r="3" />

            <circle cx="250" cy="50" r="3" />

            <circle cx="400" cy="350" r="3" />

        </g>

        <g font-size="30" fill="black" text-anchor="middle">

            <text x="100" y="350" dx="-30">A</text>

            <text x="250" y="50" dx="-10">B</text>

            <text x="400" y="350" dx="30">C</text>

        </g>

    </svg>

3.SVG的描边

案例：

源代码：

  <!-- 直线，颜色不同 -->

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

        <g fill="none">

            <path stroke="red" d="M5 20 l215 0"></path>

            <path stroke="black" d="M5 40 l215 0"></path>

            <path stroke="blue" d="M5 60 l215 0"></path>

        </g>

    </svg>

    <br>

    <!-- 线条的宽度不同 -->

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

        <g fill="none" stroke="black">

            <path stroke-width="2" d="M5 20 l215 0"></path>

            <path stroke-width="4" d="M5 40 l215 0"></path>

            <path stroke-width="6" d="M5 60 l215 0"></path>

        </g>

    </svg>

    <br>

    <!-- 线条的端帽不同，butt:默认，round：圆形，square：方形 -->

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

        <g fill="none" stroke="black" stroke-width="6" >

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

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

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

        </g>

    </svg>

    <br>

    <!-- 虚线 -->

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

        <g fill="none" stroke="black" stroke-width="4" >

            <path stroke-dasharray="5,5" d="M5 20 l215 0"></path>

            <path stroke-dasharray="10,10" d="M5 40 l215 0"></path>

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

        </g>

    </svg>