前回はSVGの基本的な書き方を解説しました。今回は前回触れなかった座標変換・
座標とグループ化
SVGにはg要素という複数の要素をまとめるための要素があります。このg要素によってグループ化した要素に同じ色を適用したり,
グループ化のサンプルコード(SVG)
<g fill="#33ff33">
<rect x="40" y="40" width="30" height="30" />
<polygon points="0,0 43.3,25 0,50"/>
</g>
グループ化のサンプルコード(SVGDOM)
// g(group)要素を作成
var g = document.createElementNS(SVG, 'g');
g.style.fill = '#3333ff';
var rect = document.createElementNS(SVG,'rect');
rect.setAttribute('width', 30);
rect.setAttribute('height', 30);
rect.setAttribute('x', 40);
rect.setAttribute('y', 40);
var triangle = document.createElementNS(SVG,'polygon');
triangle.setAttribute('points', '0,0 43.3,25 0,50');
g.appendChild(rect);
g.appendChild(triangle);
Raphaelではsetを使うことでグループ化に近い処理が可能です。ただし,
グループ化のサンプルコード
var st = paper.set();
st.push(
paper.rect(40, 40, 30, 30),
paper.path("M0,0 L43.3,25 L0,50 z")
);
st.attr({fill: "#ff3333"});
st.attr({stroke: "none"});
(SVG)
(SVGDOM)
(Raphael)
このg要素にはx, y座標もありませんし,
transformのサンプルコード
<g fill="#33ff33" transform="translate(60,10) rotate(60)">
<rect x="40" y="40" width="30" height="30" />
<polygon points="0,0 43.3,25 0,50"/>
</g>
transformのサンプルコード
// g(group)要素を作成
var g = document.createElementNS(SVG,'g');
g.setAttribute('fill', '#3333ff');
g.setAttribute('transform', 'translate(60,10) rotate(60)');
Raphaelでは次のように,
transformのサンプルコード
var st = paper.set();
st.push(
paper.rect(40, 40, 30, 30),
paper.path("M0,0 L43.3,25 L0,50 z")
);
st.attr({fill: "#ff3333"});
st.attr({stroke: "none"});
st.rotate(60);
st.translate(60, 10);
(SVG)
(SVGDOM)
(Raphael)
transform属性にはtranslate
- matrix(x軸の伸縮, y軸の傾き, x軸の傾き, y軸の伸縮, x軸の移動, y軸の移動)
に対応します。matrixで回転させたい場合は,
matrixによる回転と移動
var rad = Math.PI*2/360*60;
g.setAttribute('transform', 'matrix('+Math.cos(rad)+' '+Math.sin(rad)+' -'+Math.sin(rad)+' '+Math.cos(rad)+' 60 10)');
なお,
transform="translate(60,10) rotate(60)"
と
transform="rotate(60) translate(60,10)"
で結果が異なるという点です。移動後の回転と,
transformのサンプルコード
<g fill="#33ff33" transform="rotate(60)">
<g transform="translate(60,10)">
<rect x="40" y="40" width="30" height="30" />
<polygon points="0,0 43.3,25 0,50"/>
</g>
</g>