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);