最近在研究SVG，有个问题是SVG的缩放，跟同事研究后最终发现可以通过JQueryUI对SVG进行缩放。
在SVG外套一个DIV，通过JQueryUI的resize方法和SVG的viewbox进行缩放，代码如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/jquery-ui.min.css" />
<title>Svg.resize.js | Demo-Page</title>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery-ui.js" type="text/javascript"></script>
<style>
#div {
border: 1px solid #000000;
width: 126px;
height: 104px;
position: absolute;
border: 1px dashed #0091EA;
z-index: 10;
}
</style>
</head>
<body>
<div id="div">
<!--<div style="border:1px solid #cccccc; width:40px; height:20px; position: absolute; top:-20px;"></div>-->
<svg viewbox="0 0 126 104" id="svg" width="126" height="104" style="fill:red; z-index: -1;" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
<g>
<title>Layer 1</title>
<path id="svg_1" d="m125.75,17.91666c0,9.48089 -27.98221,17.16667 -62.50001,17.16667m62.50001,-17.16667l0,0c0,9.48089 -27.98221,17.16667 -62.50001,17.16667c-34.51779,0 -62.49999,-7.68576 -62.49999,-17.16667m0,0l0,0c0,-9.48088 27.9822,-17.16666 62.49999,-17.16666c34.5178,0 62.50001,7.68578 62.50001,17.16666l0,68.6667c0,9.48088 -27.98221,17.16664 -62.50001,17.16664c-34.51779,0 -62.49999,-7.68576 -62.49999,-17.16664l0,-68.6667z" stroke-width="1.5" stroke="#000" fill="#fff" />
</g>
</svg>
</div>
</body>
<script type="text/javascript">
var width = parseFloat($('#div').width());
var height = parseFloat($('#div').height());
//$("#div").draggable();
$('#div').resizable({
autoHide: true
},{ alsoResize: '#svg'}, {
resize: function() {
},
stop: function() {}
});
</script>
</html>
2978
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
