Svg入門

Svg 一種 基於xml的圖像文件格式，爲可縮放的矢量圖

svg繪製的每一個圖形都可以選中dom對象，因爲這些圖形本質上都是html標籤。

效果：

代碼：

    <!-- svg畫布 -->
    <svg width="800" height="800">
        <!-- 繪製矩形 -->
        <rect 
        width="50" 
        height="50"
        style="fill:red;stroke-width:1px;stroke:rgba(0,0,0,.2);"
        ></rect>
        <!-- 繪製線段 -->
        <line
            x1 ="100"
            y1 ="100"
            x2 ="200"
            y2 ="200"
            style ="stroke:blue;stroke-width:1px;"
        ></line>
        <line
        x1 ="200"
        y1 ="200"
        x2 ="300"
        y2 ="250"
        style ="stroke:blue;stroke-width:1px;"
    ></line>
        <!-- 繪製圓形 -->
        <circle
            cx="500"
            cy="400"
            r="50"
            stroke="green"
            stroke-width="2"
            fill="red"
        >
        </circle>
    </svg>