Question

所以我有const svg = e.target.parentElement;（定位到内嵌svg及其周围的div（所以<div><svg><path transform="rotate()"/></svg></div>），然后我在${svg.outerHTML}中有result.innerHTML =，但是当svg得到在innerHTML中（仅在innerHTML中），我希望它从嵌入式svg中删除transform="rotate()"。

Answer 1

let pathTransform = document.getElementById('YOUR_SVG_ID').childNodes[0].transform;

这将返回具有2个属性的SVGAnimatedTransformList对象：

baseVal：转换的原始值（旋转，翻译...）。即您在HTML中使用的值。
animVal：给定属性的当前动画值

您的路径中有一个变换（旋转），可以访问它：

let rotateTransform = pathTransform.baseVal[0];

rotateTransform可与此处列出的任何SVGTransform方法一起使用： https://developer.mozilla.org/en-US/docs/Web/API/SVGTransform

因此将“旋转”设置为0：

rotateTransform.setRotate(0, 0, 0);

三个零，因为我们需要提供数字：浮点角，浮点cx和浮点cy。

现在，如果您想在路径中使用多个变换怎么办？或者您想以编程方式添加和删除转换。在这种情况下，您可以使用type属性来标识您的转换。例如，rotate是类型4。因此，如果我们遍历baseVal：

for (const transform of document.getElementById('YOUR_SVG_ID').childNodes[0].transform.baseVal) {
    if (transform.type === 4) transform.setRotate(0, 0, 0);
}

只要循环找到一个旋转，就会将其设置为0。

由于baseVal是SVGTransformList，因此您还可以通过在baseVal上调用removeItem（i）方法来完全删除旋转。实际上，您可以在baseVal上调用此处提到的任何方法： https://developer.mozilla.org/en-US/docs/Web/API/SVGTransformList

document.getElementById('YOUR_SVG_ID').childNodes[0].transform.baseVal.removeItem(i);

如何从svg中删除转换？

1 个答案: