SVG in JS脚本元素在iPhone浏览器中失效问题求助

数据老陈

2026-6-19

iOS 17.6.1下SVG元素属性修改失效的解决方案

针对你遇到的iOS 17.6.1设备上Chrome/Safari无法通过setAttribute修改SVG圆形半径的问题，提供两种可靠的解决方式：

方案一：使用SVG DOM原生属性修改（推荐）

SVG元素的几何属性（如r、cx等）在DOM中对应专门的SVGAnimatedLength对象，直接修改其数值是WebKit引擎（iOS浏览器基于该引擎）更兼容的方式，避免setAttribute可能存在的解析延迟问题。

修改后的changeRadius函数如下：

function changeRadius() {
  const circle = document.getElementById("circle1");
  circle.r.baseVal.value = 50;
}

完整测试代码：

<!DOCTYPE html>
<html>
<body>

<h2>SVG script Element</h2>

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle id="circle1" cx="50" cy="50" r="25" style="fill:red;" />
  Sorry, your browser does not support inline SVG.
</svg>

<input type="button" value="Change Radius" onclick="changeRadius()" />

<script>
function changeRadius() {
  const circle = document.getElementById("circle1");
  circle.r.baseVal.value = 50;
}
</script>

</body>
</html>

方案二：强制触发浏览器重绘（备用）

如果方案一仍有问题，可能是浏览器渲染缓存导致视图未更新，可通过触发重排强制刷新：

function changeRadius() {
  const circle = document.getElementById("circle1");
  circle.setAttribute("r", "50");
  // 强制触发重绘
  circle.style.display = 'none';
  void circle.offsetHeight; // 触发重排，void避免返回值干扰
  circle.style.display = '';
}