HTML5本文中に<svg><g><rect><circle>を記述し、押されたボタンによりJavaScriptで処理を行っています。
SVGTransformまわりを生成し、効果を指定してやることで図形を変形させることができます。
<svg>タグと<g>タグのどちらを指定してやるかを悩んだので書き記しておきます。（間違えるともちろん思ったようには動きません））
下記3つの命令を使ってやることでとりあえずtransformできるようになりました。
- createSVGTransform()
- element.transform.baseVal.appendItem()
- Transform.setRotate() etc.
↓以下が実際のソースサンプルです。
▼JavaScript
▼CSS
▼HTML
