为什么SVG的viewBox属性在一段时间后变为null?

第一次加载完svg图后可以获取到SVG 元素的 viewBox 属性,而过段时间后再获取viewBox就变为null了,是什么原因影响的呢

相同条件下:
这样可以获取到height,
const viewBox = container.querySelector('svg').getAttribute('height');

这样却获取不到viewBox
const viewBox = container.querySelector('svg').getAttribute('viewBox');

svg图是有viewBox属性的,第一次加载完svg可以拿到。我这边写了定时器,每隔一分钟再去获取viewBox时就变为null了

以下是补充问题内容:
首次加载svg

initSvg(){
      //加载svg图并定义点击事件
        var _this = this;
      Snap.load(this.details.url + '?v=12345', function (g) {
        const container = _this.$refs.svgContainer;
        container.appendChild(g.node);
        _this.snapAdddwd();
        // 初始化svg-pan-zoom实例并绑定到SVG元素上
        const options = {
          zoomEnabled: true,
          controlIconsEnabled: false,
          fit: true,
          center: true
        };
      });
    },

在加载完的svg图上添加定位方法

snapAdddwd() {       
  var _this = this;
  //已定位组态图监测点
      const params = {
        zttId: _this.queryParams.jxt,
        stationSn: _this.queryParams.stationSn
      }
      getDqjxt(params).then(response => {
        _this.svg1 = Snap("#guidao_svg svg");
        const container = _this.$refs.svgContainer;
        //这时可以获取到viewBox
        const viewBox = container.querySelector('svg').getAttribute('viewBox');
        var ratio = 1
        if (viewBox) { 
          let boxArr = viewBox.split(" ");
          if(boxArr.length==1)
          {
            boxArr = viewBox.split(",");
          }
          const rect = container.querySelector('svg').getBoundingClientRect();
          //计算画布尺寸和画布上显示区域的比例
           ratio = Math.min(rect.width / boxArr[2], rect.height / boxArr[3]);
        }
        _this.ratio = ratio;

        //描点逻辑代码省略。。。
  
        const options = {
          zoomEnabled: true,
          controlIconsEnabled: false,
          fit: true,
          center: true
        };
        const panZoomInstance = svgPanZoom(container.querySelector('svg'), options);
      });
},

定时器方法

mounted() { 
    this.interval = setInterval(() => {
      this.updateAdddwd();//只更新数据
    }, 60000);
  },

更新数据updateAdddwd()方法

updateAdddwd() {       
  var _this = this;
  //已定位组态图监测点
      const params = {
        zttId: _this.queryParams.jxt,
        stationSn: _this.queryParams.stationSn
      }
      getDqjxt(params).then(response => {
        _this.svg1 = Snap("#guidao_svg svg");
        if(_this.svg1 != null){
          const container = _this.$refs.svgContainer;
        const viewBox = container.querySelector('svg').getAttribute('viewBox');
        //此时获取到的viewBox 就为null了
        console.log("JSON.stringify(viewBox)::"+JSON.stringify(viewBox))
          var g =_this.svg1.select('#myGroupId')

        
          const options = {
                zoomEnabled: true,
                controlIconsEnabled: false,
                fit: true,
                center: true
              };
          const panZoomInstance = svgPanZoom(container.querySelector('svg'), options);
        }
      });
},

所以产生疑问为什么只在首次加载完svg后执行的snapAdddwd()方法中可以获取到viewBox,而在间隔60秒后触发的定时器执行的updateAdddwd()方法中获取到的viewBox就为null了?

阅读 602
avatarAI BotBETA

SVG的viewBox属性通常不会自行变为null,除非有一些外部因素影响了它。根据你提供的描述,这可能由以下几个原因造成:

  1. 动态修改: 如果在SVG加载后,有代码动态地修改了SVG元素或其属性,包括viewBox,那么这可能导致你后来查询时获取到null
  2. DOM变化: 如果SVG元素或其父元素在DOM中被移除或替换,然后重新插入,那么重新插入后的元素可能不再包含原始的viewBox属性。
  3. 异步加载: 如果SVG是异步加载的,并且你尝试在SVG完全加载之前获取viewBox属性,那么可能会获取到null
  4. 浏览器缓存或重绘: 在某些情况下,浏览器可能会因为缓存或其他优化机制而不显示最新的SVG内容。
  5. 外部脚本或库: 如果你在页面中使用了外部脚本或库,它们可能以某种方式影响了SVG元素或其属性。
  6. 定时器的实现: 如果你的定时器实现有误,或者定时器在SVG元素尚未加载完全时执行,那么也可能获取到null

要解决这个问题,你可以尝试以下方法:

  • 确保在SVG完全加载后再执行获取viewBox属性的代码。
  • 检查是否有任何代码在修改SVG或其属性。
  • 使用浏览器的开发者工具来监视SVG元素及其属性的变化。
  • 如果可能,尝试在定时器执行前添加一些延迟,以确保SVG已经加载完成。
  • 检查你的HTML和JavaScript代码,确保没有逻辑错误或拼写错误。

如果你能提供更多关于你的代码和环境的详细信息,我可能能提供更具体的建议。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题