如何用JavaScript修改SVG中use元素的transform属性（添加scale(2)）

可行性结论 #

完全可行，SVG允许在transform属性中同时指定多个变换操作，只需在原有translate变换后追加scale(2)即可实现需求。

实现方法 #

方案1：直接拼接字符串（简单高效） #

通过获取元素现有transform值，直接在末尾拼接scale变换，重新赋值给元素：

// 获取目标use元素
const useEl = document.querySelector('.check-icon');
if (!useEl) return;

// 获取原有transform属性值
const originalTransform = useEl.getAttribute('transform');
// 拼接新的transform：保留原有translate，添加scale(2)
useEl.setAttribute('transform', `${originalTransform} scale(2)`);

方案2：使用SVGTransformList（精准可控） #

如果需要后续灵活调整变换（比如修改缩放比例、调整变换顺序），可以用SVG原生的变换列表API，无需手动解析字符串：

const useEl = document.querySelector('.check-icon');
if (!useEl) return;

const transformList = useEl.transform.baseVal;
// 创建scale变换实例
const scaleTrans = useEl.ownerSVGElement.createSVGTransform();
// 设置缩放比例（x和y方向都为2）
scaleTrans.setScale(2, 2);
// 将scale变换追加到现有变换列表末尾
transformList.appendItem(scaleTrans);

关键提示 #

变换顺序很重要：translate(x,y) scale(2) 是先执行平移再缩放，若调换顺序为scale(2) translate(x,y)，缩放会放大平移的距离，根据你的需求确认顺序即可。

内容的提问来源于stack exchange，提问作者Ivan Puente Cruz