JavaScriptでインラインSVGを変更するにはどうすればよいですか？

Question

は、私は多くの団体と

<svg> 
    <g id="1" transform="<list of transformations>"> 
     <path d=""> 
     <circle cx="" ...> 
    </g> 
    ... 
</svg> 

のようなインラインSVGを持っていると私には、JavaScript/jQueryを使ってそれらを移動します。 私はサイト上で入力から（回転など）の値を取り、

$("#1").attr("transform", "<list of new transformations>"); 

を使用しようとしましたが、それは動作しません。 JSファイルから実行されるとき、あなたは変更を見ることができません。コンソールに手動で挿入すると、 $("#1").attr("transform")で値を取得できますが、目に見える変化につながることはなく、インスペクタの要素は変更されません。 Firefox/Chromeでテストされています。

実行時にjavascriptまたはjQueryを使用してsvgを変更するにはどうすればよいですか？

編集：問題は、すべてのIDがスクリプトの別の部分で発生したため、間違ったものが選択されたということでした。

Answer 1

全体として、あなたのアプローチは正しいようです。しかし、以下のコードはこれをどうやって行うことができるかを示しているので、あなたが作っている微妙な間違いが表示されるかもしれません。

jQueryまたはvanilla JavaScriptを使用すると、次のコードに示すようにSVG要素を変更できます。つまり、.attr(attributeName, attributeValue)をjQueryに、.setAttribute(attributeName, attributeValue)をバニラJavaScriptに使用します。

変換を変更するには、適切な構文（例：hereを参照）に従わなければなりません。

$('#b2').attr('fill', 'red'); 
 
document.querySelector('#c2').setAttribute('fill', 'magenta'); 
 

 
$('#b2').attr('transform', 'translate(0, 20)'); 
 
document.querySelector('#c2').setAttribute('transform', 'rotate(10, 250, 80)');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p>Top row: three identical yellow rectangles.</p> 
 
<p>Bottom row: three similar rectangles. The second is modified using jQuery, the third using vanilla JavaScript</p> 
 
<svg> 
 
    <rect id="a1" x="50" y="20" width="40" height="20" fill="yellow" /> 
 
    <rect id="b1" x="150" y="20" width="40" height="20" fill="yellow" /> 
 
    <rect id="c1" x="250" y="20" width="40" height="20" fill="yellow" /> 
 

 
    <rect id="a2" x="50" y="70" width="40" height="20" fill="yellow" /> 
 
    <rect id="b2" x="150" y="70" width="40" height="20" fill="yellow" /> 
 
    <rect id="c2" x="250" y="70" width="40" height="20" fill="yellow" /> 
 
</svg>