javascript - 使用 Jquery 调整 Svg 图像的大小

Question

我正在编写一个 PHP 脚本，其中包含一个包含 SVG 的页面。我想要做的是使用 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

试试这个 jsfiddle

包裹在 div 上到图像。

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;
}