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);
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页