使用jQuery调整SVG图像大小

Question

我正在编写一个包含SVG的PHP脚本页面。我想使用Jquery Resize功能，但是在尝试将其用于SVG内部的图像时，它并没有起作用。我已经在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>

Jquery代码：

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

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

- Belatar Yassine

---

你可以尝试将SVG放入某个DIV中，将SVG的宽度和高度设置为“100%”，并使DIV可调整大小。 - Andrew Dunai

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

- yongsup

---

这个SVG可以转化为多张图片，这是可行的吗？ - Belatar Yassine

请问您能否也添加旋转选项。 - user5844810

@Felix，我无法仅使用JqueryUI添加旋转功能。但是我找到了jquery-ui-rotatable，这是一个示例（http://jsfiddle.net/nCAkM/78/）。我认为这不是完美的解决方案，你需要计算角度和转换位置。 - yongsup

Answer 2

感谢您的建议。我已经成功将我的SVG对象包装在一个div中。然后，我使用了resize UI事件大小来设置对象上的CSS。

HTML

  <div id="divVirtualKeyboard" style="display: none; position: absolute; top: 200px; left: 100px">
    <div>
      <object id="canvasKeyboard" data="static/EmulatorKeyboard.svg" type="image/svg+xml" width="376" height="214" style="pointer-events:none;"></object>
    </div>
  </div>

JS

  div.resizable(
    {
      aspectRatio: 376 / 214,
      resize: function (event, ui) {
        div.find('object').css('width', ui.size.width)
        div.find('object').css('height', ui.size.height)
      }
    });

- tgraupmann