SVGの操作：

SVGの埋め込みimageの画像を変更

指定したSVGオブジェクトに埋め込まれている<image>に設定されている画像ファイルやクリップパスを変更する。
<image>が存在しない場合には追加することも可能。

Node
SVG Nodeを渡す id値を文字列で指定してもよい
String1
画像ファイルパスを指定 現在の画像を使うなら false を指定
String2
clip-pathのid値を指定 <image>が既存でclip-pathが設定されている場合のみ省略可能
String3
<image>に設定する幅・高さ・X位置・Y位置を指定 半角スペース区切りの文字列で指定
  • ●幅・高さのみ指定：(例) '300 250'
  • ●4項目全て指定：(例) '300 250 center top' ／ 
    【X値】left・center・right 【Y値】top・center・bottom
  • ※大文字・小文字で指定可能
  • ※省略した場合、<image>が既存なら継承、<image>が無ければ<svg>のviewBoxの値を代用
●必須引数 ●オプション引数(省略可能)

記述例

$svgSetImage(SVG Node, 'images/img.png')
$svgSetImage('SVG_id', false, 'spl_path1')
$svgSetImage(SVG Node, 'images/img.png', 'spl_path1', '400 250')
$svgSetImage(SVG Node, 'images/img.png', 'spl_path1', '400 250 right top')

注意点

<svg>に<image>が設定されていない場合には、『画像ファイルパス』と『clip-pathのid値』の2つが指定された場合のみ<image>を追加可能。この時、widthとheightが省略されている場合には、対象となる<svg>のviewBoxから値が代入される。

動作サンプル

画像はpht_1.jpgが設定され、パス1が適用されている状態から変更する。

HTML : <svg style="position: absolute; top: -9999px;"> // clipPath定義用のSVG <clipPath id="samplepath1"> <path d="M18.23,187.847c0,──省略──"/> </clipPath> <clipPath id="samplepath2"> <path d="M73.896,200c-3.261,──省略──"/> </clipPath> <clipPath id="samplepath3"> <path d="M299.362,119.214c-0.708,──省略──"/> </clipPath> </svg>   <svg id="img1" width="450" height="300" viewBox="0 0 300 200"> // 表示用のSVG <image xlink:href="images/pht_1.jpg" clip-path="url(#samplepath1)" width="300" height="200"> </svg>
Javascript : $svgSetImage('img1','images/pht_2.jpg'); $svgSetImage('img1','images/pht_3.png','samplepath2'); $svgSetImage('img1',false,'samplepath3');

<image>が設定されていない状態から変更する。

HTML : <svg style="position: absolute; top: -9999px;"> // clipPath定義用のSVG <clipPath id="samplepath1"> <path d="M18.23,187.847c0,──省略──"/> </clipPath> <clipPath id="samplepath2"> <path d="M73.896,200c-3.261,──省略──"/> </clipPath> <clipPath id="samplepath3"> <path d="M299.362,119.214c-0.708,──省略──"/> </clipPath> </svg>   <svg id="img2" width="450" height="300" viewBox="0 0 300 200"> // 表示用のSVG・<image>は未設定 </svg>
Javascript : $svgSetImage('img2','images/pht_1.jpg','samplepath2'); $svgSetImage('img2',false,'510 340'); $svgSetImage('img2',false,'samplepath1','510 340 center center');
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。