单击按钮时使用 Jquery 调整 Svg 图像大小

Question

你好，我看到使用 jquery 调整 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);

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

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div class="resize">
resize helper
</div>
  <div class='resize-plus'></div>
<div class='resize-minus'></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>

现在我有 div 的 class resize-plus，resize-minus .如果我们点击 resize-plus 我需要增加 svg 的大小，如果 resize-minus 我需要减小 svg.That 的大小是调整大小功能需要在这两个 div 中修改。那么该怎么做呢？以及如何设置条件，例如如果图像大小增加大于和小于 resize 。谢谢你。

Answer 1

我为 + 和 - 分区添加了函数。

查看下方 fiddle:

DEMO

单击按钮时使用 Jquery 调整 Svg 图像大小

Resize Svg Image Using Jquery on Button click

javascript

jquery

svg

jquery-ui

jquery-plugins