SVG基本使用（五、腳本編程）

• svg腳本編程：通過js操作svg
  企業開發中均使用框架進行腳本編程
  腳本編程推薦自學svg框架
  https://svgjs.com/
  http://snapsvg.io/docs/
  可以做搜狗瀏覽器官網特效。多看看svg在線編輯器
• 使用js繪製svg注意點：
  • 繪製畫布注意點:
    創建SVG時必須指定命名空間（用於告訴瀏覽器，此文件不是普通xml文件，而是用來表示SVG圖形的。svg內所有標籤都要添加）
    const SVG_NS = “http://www.w3.org/2000/svg”
    並且使用createElementNS方法創建，傳遞兩個參數：
    參數一：命名空間
    參數二：元素
  • 使用xlink屬性注意點
    使用xlink屬性也必須指定命名空間
    const XLINK_NS = “http://www.w3.org/1999/xlink”;
    並且使用setAttributeNS方法添加屬性，傳遞三個參數：
    參數一：命名空間
    參數二：屬性
    參數三：屬性值
• 案例需求：使用js繪製如下svg

<svg width="500" height="500">
    <circle cx="100" cy="100" r="50" fill="red"></circle>
    <image xlink:href="任意圖片路徑" x="200" y="200"></image>
</svg>

使用js實現源碼：

    /*繪製畫布*/
    const SVG_NS = "http://www.w3.org/2000/svg";
    // let oSvg = document.createElement("svg");/*創建svg*/
    let oSvg = document.createElementNS(SVG_NS,"svg");/*創建svg*/
    oSvg.setAttribute("width","500");//設置寬度
    oSvg.setAttribute("height","500");//設置高度
    document.body.appendChild(oSvg);

    /*繪製圓 */
    // let oCircle = document.createElement("circle");
    let oCircle = document.createElementNS(SVG_NS,"circle");
    oCircle.setAttribute("cx","100");//圓的位置
    oCircle.setAttribute("cy","100");
    oCircle.setAttribute("r","50");
    oCircle.setAttribute("fill","red");
    oSvg.appendChild(oCircle);

    /*繪製圖片*/
    const XLINK_NS = "http://www.w3.org/1999/xlink";
    let oImage = document.createElementNS(SVG_NS,"image");
    oImage.setAttribute("x","200");//圖片的位置
    oImage.setAttribute("y","200");
    // oImage.setAttribute("xlink:href","images/lnj.jpg");
    oImage.setAttributeNS(XLINK_NS,"xlink:href","images/lnj.jpg");
    oSvg.appendChild(oImage);