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

Question

第一次加载完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了

Answer 1

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代码，确保没有逻辑错误或拼写错误。

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