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);
}

P.S。 svg对象在.svg文件中编码，上面的js代码在另一个.js文件中编码

Answer 1

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

虽然它们都是DOM节点，但SVG元素使用inline attributes进行这些操作。

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

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>

Answer 2

您也可以为svg元素使用样式。但是没有名为scale或translate的CSS属性这些函数是transform属性的一部分，它在标记中也作为SVG attribute类似的集合出现，语法略有不同，例如，CSS确实需要一个单元才能工作，并且不会了解SVG的魔法[no-]单位。

由于CSS样式确实优先于相应的属性，因此您无需修改属性并只需修改代码，以便将CSS transform属性设置为您尝试的功能设置，但这次作为单个字符串规则：

＆＃13;

var node = document.getElementById("object1");
node.onclick = function(){
  // set both functions as a single rule.
  node.style.setProperty("transform", "scale(1,-1) translate(0px,-400px)",null);
}

＆＃13;

#object1{
  transition: transform 2s ease;
}

＆＃13;

<svg viewBox="0 0 400 400" width="100" height="100">
<g id = "object1" transform = "scale(-1,1) translate(-400,0)">
<path d="M 100 100 L 300 100 L 200 300 z"
        fill="orange" stroke="black" stroke-width="3" />
</g>
</svg>

＆＃13;

使用javascript翻转SVG对象

2 个答案: