javascript - 如何从 svg 中删除变换？

Question

所以我有const svg = e.target.parentElement; (针对内联 svg 及其周围的 div (因此 <div><svg><path transform="rotate()"/></svg></div> ))，然后我有 ${svg.outerHTML}在 result.innerHTML =但是当 svg 进入innerHTML(仅在innerHTML)时，我希望它删除 transform="rotate()"来自内联 svg。

Answer 1

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

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

1. baseVal:转换的原始值(旋转、翻译...)。 IE。您在 HTML 中使用的值。
2. animVal:给定属性的当前动画值

您的路径中有一个转换(旋转)，要访问它:

let rotateTransform = pathTransform.baseVal[0];

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

因此将旋转设置为 0:

rotateTransform.setRotate(0, 0, 0);

三个零，因为我们需要提供数字: float Angular 、 float cx 和 float 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 上的removeItem(i) 方法来完全删除旋转，因为baseVal 是一个SVGTransformList。事实上，您可以在 baseVal 上调用此处提到的任何方法: https://developer.mozilla.org/en-US/docs/Web/API/SVGTransformList

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