Jqueryを使用してSvgイメージのサイズを変更する

Question

私はSVGを含むページを含むPHPスクリプトを作成しています。私がしたいことは、Jqueryのサイズ変更機能を使用することです。私はdivでこれを試してみましたがうまくいきましたが、SVG内の画像のサイズを変更する場合には機能しません。

doiud

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="420" id="svg"> 
<image height="120" width="120" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://designpieces.com/wp-content/uploads/2013/04/chrome.png" ></image></svg> 

のjQueryコード：

$('.resize').resizable({ 
    ghost: true 
      }); 
      $('image').resizable({ 
    ghost: true 
      }); 

http://jsfiddle.net/nCAkM/39/

Answer 1

画像にdiv要素に包まれたこの1 jsfiddle

試し はここのコードです。あなたが "100％" にSVGのいくつかのDIV、設定幅＆高さにSVGを置くことを試みることができ

HTML

<div class="resize"> 
resize helper 
</div> 


<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="420" id="svg"> 
    <image height="120" width="120" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://designpieces.com/wp-content/uploads/2013/04/chrome.png" ></image> 
</svg> 

スクリプト

$('.resize').resizable({ 
    ghost: true, 
    resize: function(event, ui) { 
     var width = ui.size.width; 
     var height = ui.size.height; 
     $('image').attr('width',width); 
     $('image').attr('height',height); 
    } 
      }); 

var position = $('svg').position(); 
$('.resize').css('top',position.top); 
$('.resize').css('left',position.left); 

CSS

.resize{ 
    height: 120px; 
    width: 120px; 
    position:absolute; 
    z-index:0; 
}