[英]Resize Svg Image Using Jquery
我正在开发一个PHP脚本,其中包含一个内置SVG的页面。 我想要做的是使用Jquery调整大小功能。 我在div上尝试了这个并且它工作正常但是当我想用它来调整SVG内部的图像时它不起作用。 这是代码:
doiud$('.resize').resizable({
ghost: true
});
$('image').resizable({
ghost: true
});
Jquery代码:
$('.resize').resizable({ ghost: true }); $('image').resizable({ ghost: true });
试试这个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;
}
谢谢你的提示。 我能够将我的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)
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.