javascript - 使用javascript翻转SVG对象

Question

我在尝试使用 javascript 翻转 SVG 对象时遇到问题。我已经搜索了几种翻转 svg 对象方向的方法，例如:

<g id = "object1" transform = "scale(-1,1) translate(-100,0)">
//code of svg object
</g>

当我试图在我的 js 文件中应用类似的代码时，它无法翻转对象。

svgdoc = evt.target.ownerDocument;
var node = svgdoc.getElementById("object1");
node.onclick = function(){
  node.style.setProperty("scale", "(-1,1)",null);
  node.style.setProperty("translate", "(-100,1)",null);
}

附注svg对象编码在.svg文件中，上面的js代码编码在另一个.js文件中

Answer 1

对于 SVG 元素，您需要使用 .setAttribute 而不是 .style。

虽然都是DOM节点，但是SVG元素使用inline attributes对于这些操作。

除此之外，您还需要翻译您的项目以抵消应用缩放时的位置变化

document.querySelector('#group').addEventListener('click', function() {
  this.setAttribute('transform', 'scale(-1, 1) translate(-100, 0)')
})

<svg viewBox="0 0 195 150" xmlns="http://www.w3.org/2000/svg">
   <g id="group" stroke="green" fill="white" stroke-width="5">
     <circle cx="0" cy="25" r="15"/>
     <circle cx="20" cy="25" r="15"/>
     <circle cx="40" cy="25" r="15"/>
     <circle cx="60" cy="25" r="15"/>
     <circle cx="80" cy="25" r="15"/>
     <circle cx="100" cy="25" r="15"/>
   </g>
</svg>