svg.js

最新推荐文章于 2024-07-22 08:55:10 发布

锦坤！

最新推荐文章于 2024-07-22 08:55:10 发布

阅读量231

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_44042792/article/details/136186511

版权

1. 动态添加图片

let svgc = document.querySelector("#svgEventDiv");
      this.svgWidth = svgc.getBoundingClientRect().width;
      this.svgHeight = svgc.getBoundingClientRect().height;
      // console.log(this.svgWidth, this.svgHeight);
      this.svgDom.clear();
      // 设置viewbox（缩放）
      this.svgDom.viewbox("0 0 " + this.svgWidth + " " + this.svgHeight);

      let planImage = this.svgDom
        .image(require("./assets/part-00543-257.jpg"))
        // .image(require("./assets/logo.png"))
        .loaded(imgSize => {
          console.log("imgSize", imgSize);
          let xWidth = (this.svgWidth - imgSize.width) / 2;
          let yWidth = (this.svgHeight - imgSize.height) / 2;
          planImage.attr({
            x: xWidth,
            y: yWidth
          });
        });

2. 动态添加矩形

// 添加矩形并且添加点击事件
        this.svgDom
          .rect(100, 100)
          .move(200, 200)
          .attr({ fill: "#f06", id: "rect" + index });
        let rect = document.querySelector("#rect" + index);
        let tipTemp = null;
        rect.addEventListener("click", () => {
          // console.log("ele, index", ele, index);
        });

3. 动态添加文本

// 添加文本
        this.svgDom.text(add => {
          console.log("add", add);
          add.tspan("我是你爸爸").attr({
            x: xWidth + ele.x,
            y: yWidth + ele.y,
            fill: "#f06"
          });
          add
            .tspan("我是你爸爸111")
            .newLine()
            .attr({
              x: xWidth + ele.x,
              y: yWidth + ele.y,
              fill: "#f06"
            });
          add.tspan("我是你爸爸").attr({
            x: xWidth + ele.x + 40,
            y: yWidth + ele.y + 30,
            fill: "#090"
          });
        });