javascriptを使用してSVGオブジェクトを反転します。

Question

javascriptを使用してSVGオブジェクトを反転しようとしたときに問題が発生しました。

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

私は私のjsファイルで同様のコードを適用しようとしていた、それはオブジェクトを反転することができなかった：私のようなSVGオブジェクトの方向を反転するために、いくつかの方法で検索しました。

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

の代わりに.setAttributeを使用する必要があります。

これらはどちらもDOMノードですが、SVG要素はこれらの操作にinline attributesを使用します。別にあなたもスケーリングはあなたがあまりにもSVG要素のスタイルを使用することができます

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

適用した場合の位置変化を相殺するためにあなたの商品をtranslateする必要があることから、

。しかし、scaleまたはtranslateというCSSプロパティはありません。
これらの関数はtransformプロパティの一部で、マークアップにはSVG attributeのようにいくつかの構文があります。たとえば、CSSにはユニットが必要です。SVGの魔法[no- ]単位。

CSSスタイルは対応する属性より優先されるため、CSS transform属性を設定しようとしている両方の機能に設定するように属性を変更してコードを変更する必要はありません単一の文字列ルールとして：

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

#object1{ 
 
    transition: transform 2s ease; 
 
}

<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>