在按钮上使用Jquery调整SVG图像的大小

马丁·金

嗨,我看到了使用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的类resize-plus,resize-minus。如果我们点击resize-plus我需要增加svg的大小,如果resize-minus我需要减小svg的大小。那就是resize功能需要修改在这两个div中 那么该怎么做呢?以及如何设置条件,例如图像大小是否增加小于和小于调整大小。谢谢你 。

金丹潘迪亚

我为+-divs添加了功能

看看下面的小提琴:

演示

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类常见问题

如何在Mac OSX上使用终端调整图像大小?

来自分类Dev

如何在按钮上显示动态文本并在Android中自动调整其大小?

来自分类Dev

使用CSS调整图像大小

来自分类Dev

SVG图像元素调整大小图片

来自分类Dev

在Ubuntu上使用convert调整图像的大小

来自分类Dev

使用Jquery在按钮单击上显示模态

来自分类Dev

使用Jquery在按钮单击上隐藏/显示Div

来自分类Dev

Boostrap:调整大小时如何在图像上“粘贴”按钮

来自分类Dev

如何在使用“ CarouselSlider”时相对于移动设备大小调整图像大小,并在图像上使按钮文字颤抖?

来自分类Dev

jQuery使用心跳效果调整图像大小

来自分类Dev

使用Jquery .animation进行平滑的图像调整大小和缩放

来自分类Dev

在按钮上添加数字单击使用jQuery吗?

来自分类Dev

在show方法中使用Rails上的ruby调整图像大小

来自分类Dev

jQuery:在调整大小的图像上冒烟

来自分类Dev

我想把图像放在按钮上

来自分类Dev

Colorbox上的jQuery图像调整大小

来自分类Dev

使用jQuery进行居中和动态调整图像大小

来自分类Dev

使用jquery ajax在按钮单击上的POST表单

来自分类Dev

在jQuery中调整图像大小无法在所有图像上使用

来自分类Dev

在按钮的`ImageView`中设置图像的大小,其中使用CSS设置图像

来自分类Dev

如何使用可调整大小的jQuery在x和y轴上以正确的比例调整图像大小

来自分类Dev

在不使用jquery调整大小的图像上缩放SVG

来自分类Dev

使用静态资源在按钮图像上显示文本

来自分类Dev

如何调整按钮图像的大小?

来自分类Dev

如何使用自动调整大小修复 iPhone X 上的按钮调整大小

来自分类Dev

如何使用 jQuery UI 调整 SVG 标签图像的大小?

来自分类Dev

如何定位和调整图像按钮的大小

来自分类Dev

如何使图像“浮动”在按钮上?

来自分类Dev

在按钮上添加椭圆图像

Related 相关文章

  1. 1

    如何在Mac OSX上使用终端调整图像大小?

  2. 2

    如何在按钮上显示动态文本并在Android中自动调整其大小?

  3. 3

    使用CSS调整图像大小

  4. 4

    SVG图像元素调整大小图片

  5. 5

    在Ubuntu上使用convert调整图像的大小

  6. 6

    使用Jquery在按钮单击上显示模态

  7. 7

    使用Jquery在按钮单击上隐藏/显示Div

  8. 8

    Boostrap:调整大小时如何在图像上“粘贴”按钮

  9. 9

    如何在使用“ CarouselSlider”时相对于移动设备大小调整图像大小,并在图像上使按钮文字颤抖?

  10. 10

    jQuery使用心跳效果调整图像大小

  11. 11

    使用Jquery .animation进行平滑的图像调整大小和缩放

  12. 12

    在按钮上添加数字单击使用jQuery吗?

  13. 13

    在show方法中使用Rails上的ruby调整图像大小

  14. 14

    jQuery:在调整大小的图像上冒烟

  15. 15

    我想把图像放在按钮上

  16. 16

    Colorbox上的jQuery图像调整大小

  17. 17

    使用jQuery进行居中和动态调整图像大小

  18. 18

    使用jquery ajax在按钮单击上的POST表单

  19. 19

    在jQuery中调整图像大小无法在所有图像上使用

  20. 20

    在按钮的`ImageView`中设置图像的大小,其中使用CSS设置图像

  21. 21

    如何使用可调整大小的jQuery在x和y轴上以正确的比例调整图像大小

  22. 22

    在不使用jquery调整大小的图像上缩放SVG

  23. 23

    使用静态资源在按钮图像上显示文本

  24. 24

    如何调整按钮图像的大小?

  25. 25

    如何使用自动调整大小修复 iPhone X 上的按钮调整大小

  26. 26

    如何使用 jQuery UI 调整 SVG 标签图像的大小?

  27. 27

    如何定位和调整图像按钮的大小

  28. 28

    如何使图像“浮动”在按钮上?

  29. 29

    在按钮上添加椭圆图像

热门标签

归档