SVGの操作：

SVGの位置と拡縮タイプを変更

指定したSVGオブジェクトに設定されているpreserveAspectRatioを変更する。

Node
SVG Nodeを渡す id値を文字列で指定してもよい
String1
位置を指定 ※false を指定した場合は、拡縮タイプは無視される。
  • X軸とY軸を半角スペースで区切って指定 (例) 'center top'
  • 頭の1文字でも可 (例) 'LEFT BOTTOM' → 'L B'
String2
拡縮タイプを指定 省略した場合は meet となる
  • meet = viewBox 全体がビューポートの中に見える
  • slice = ビューポート全体が viewBox に覆われる
  • 頭の1文字でも可 (例) 'meet' → 'm'
●必須引数 ●オプション引数(省略可能)

記述例

$svgSetPosition(SVG Node, 'center top', 'slice')
$svgSetPosition('SVG_id', 'right bottom')
$svgSetPosition(SVG Node, 'C T', 'S')

注意点

<svg>のpreserveAspectRatioは、width/heightの値とviewBoxの値が一致していない場合にのみ機能する点に注意して使用すること。

動作サンプル

ビューポートとなる SVG の preserveAspectRatio を変更する。

Javascript : $svgSetPosition('parent1','right top','meet'); $svgSetPosition('parent1',false);

ビューポートとなる SVG の preserveAspectRatio を変更する。

Javascript : $svgSetPosition('parent2','right bottom','meet'); $svgSetPosition('parent2',false);
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。