使用jQuery更新SVG的transform属性失败，Div可正常更新求助

这个问题我之前也踩过坑！核心原因是SVG元素的transform和普通HTML元素的transform在DOM中的处理逻辑完全不一样：

• 普通<div>这类HTML元素的transform是CSS属性，jQuery的.css()方法可以完美识别并修改它；
• 但SVG里的<polygon>（包括<rect>、<circle>等其他SVG元素）的transform本质是HTML属性（attribute），不是CSS属性（虽然部分现代浏览器支持用CSS设置，但jQuery的.css()方法对SVG的CSS属性兼容并不好）。

正确的解决方案 #

方案1：用jQuery的.attr()直接修改SVG的transform属性 #

这是最稳妥、符合SVG规范的方式：

// 示例：给polygon设置平移+旋转的transform
$('polygon').attr('transform', 'translate(50, 50) rotate(30)');

注意这里的transform值不需要加单位（比如px、deg），SVG默认使用用户坐标系的单位。

方案2：用原生DOM操作设置CSS transform（适合CSS动画场景） #

如果你的场景需要用CSS控制transform（比如配合transition动画），可以跳过jQuery的.css()，直接操作元素的style属性：

// 注意这里需要加CSS单位，比如px、deg
$('polygon').get(0).style.transform = 'translate(50px, 50px) rotate(30deg)';

jQuery的.css()之所以不好用，是因为它内部的属性处理逻辑是针对HTML元素设计的，对SVG元素的CSSOM支持不完善，直接操作原生DOM的style属性反而更可靠。

对比示例 #

<!-- 普通div，用.css()正常工作 -->
<div class="box"></div>
<!-- SVG polygon，需要用.attr()或原生style -->
<svg width="200" height="200">
  <polygon points="50,0 100,100 0,100" fill="#f00" />
</svg>

<script>
// 处理div（正常生效）
$('.box').css('transform', 'translate(50px, 50px) rotate(30deg)');

// 处理polygon方式1：用.attr()
$('polygon').attr('transform', 'translate(50,50) rotate(30)');

// 处理polygon方式2：用原生style
// $('polygon').get(0).style.transform = 'translate(50px,50px) rotate(30deg)';
</script>

内容的提问来源于stack exchange，提问作者Sukhchain Singh