SVG繪製圖形

1、SVG介紹

一、SVG指可伸縮矢量圖片

二、SVG用來定義用於網絡的基於矢量的圖形

三、SVG使用XML格式定義圖形

四、SVG圖像在放大或改變尺寸的狀況下其圖形質量不會有損失

五、SVG是萬維網聯盟的標準

2、SVG的優點

一、SVG圖像可經過文本編輯器來建立和修改

二、SVG圖像可被搜索、索引、腳本化或壓縮

三、SVG是可伸縮的

四、SVG圖像可在任何分辨率下被高質量地打印

五、SVG可在圖像質量不降低的狀況下被放大。

3、繪製SVG圖形

<!--繪製圓形 fill爲填充顏色、stroke爲邊框，stroke-width爲邊框寬度-->
<svg width="120" height="120" viewBox="0 0 120 120" version="1.1">
    <circle cx="60" cy="60" r="50" fill="red"  stroke="black" stroke-width="3"></circle>
</svg>

<!--繪製橢圓-->
<svg width="120" height="120" viewBox="0 0 120 120" version="1.1">
    <ellipse cx="60" cy="60" rx="50" ry="25"></ellipse>
</svg>

　　

<svg width="120" height="120" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
    <path d="M 100 100 L 300 100 L 200 300 z" fill="orange" stroke="black" stroke-width="3" />
</svg>

<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <path d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1,10,110" fill="none" id="theMotionPath" stroke="lightgrey" stroke-width="3" />
    <circle cx="10" cy="110" r="3" fill="lightgrey"></circle>
    <circle cx="110" cy="10" r="3" fill="lightgrey"></circle>
    <circle cx="" cy="" r="5" fill="red">
        <animateMotion dur="6s" repeatCount="indefinite">
            <mpath xlink:href="#theMotionPath"></mpath>
        </animateMotion>
    </circle>
</svg>

<?xml version="1.0"?>
<svg width="120" height="120" viewPort="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect x="10" y="10" width="100" height="100">
        <animate attributeType="XML" attributeName="x" from="-100" to="120" dur="10s" repeatCount="indefinite"/>
    </rect>
</svg>