如何通过jQuery UI“点击”设置SVG可调整大小？
HTML
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.0" x="0.00000000" y="0.00000000" width="480.00000" height="480.00000" id="svg1">
<path d="M 574.28571 350.93362 A 230.00000 230.00000 0 1 1 114.28571,350.93362 A 230.00000 230.00000 0 1 1 574.28571 350.93362 z" transform="translate(-95.71429,-108.5714)" style="opacity:1.0000000;fill:#ffffff;fill-opacity:1.0000000;stroke:none;stroke-width:2.0000000;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4.0000000;stroke-dasharray:none;stroke-opacity:1.0000000" id="path1366" />
<path d="M 231.48189,473.26283 C 131.83469,468.06658 42.098062,390.44395 21.653942,292.99899 C 2.8527423,211.64305 32.299602,121.62080 96.083632,67.582430 C 141.33822,28.222080 202.15620,7.4760400 262.06397,11.991470 C 356.93917,15.843450 443.80335,86.158270 469.35800,177.35283 C 479.83354,210.86634 479.80411,246.84493 475.57362,281.36221 C 461.15785,369.25654 392.02150,445.16887 305.33917,466.41185 C 281.37157,472.30240 256.12409,475.36915 231.48189,473.26283 z M 195.98189,459.07832 C 153.70976,438.32840 127.57657,390.25793 133.57107,343.48796 C 138.36082,288.35497 188.51696,242.79478 243.64749,241.80851 C 289.80353,243.23178 335.32348,214.53137 352.09275,171.21770 C 372.17245,123.85997 354.81639,64.420260 312.15547,35.497910 C 277.18597,9.7192000 230.39701,15.186720 190.59735,24.146350 C 98.599342,46.695330 27.467842,132.85978 22.328202,227.37156 C 15.617372,312.66393 62.578582,398.76397 137.71937,439.58565 C 156.53626,449.74840 183.25724,461.62547 200.86096,461.86871 L 198.91377,460.67719 L 195.98190,459.07832 L 195.98189,459.07832 z M 240.98189,156.44487 C 217.68690,151.96726 210.63785,117.76008 230.72475,104.79451 C 251.31111,88.759900 283.63841,110.57202 275.52356,135.98196 C 271.79700,150.60792 255.61257,159.83414 240.98189,156.44487 z M 252.66158,383.23027 C 281.22410,379.65834 281.98701,333.88297 253.46715,329.56000 C 230.89663,323.64667 211.28225,351.85522 224.59048,371.08172 C 230.24130,379.64095 242.27756,386.42957 252.66158,383.23027 z " style="fill:#000000" id="path1351" />
</svg>
jQuery的
$('#svg1').click(function () {
$("#svg1").resizable();
});
来自Alvin.K的SOLUTION
解决方法
基于上面的评论中的
the example,你可以尝试这个调整,不改变SVG,只改变DIV大小.
$('body').append('<div style="width:200px; height:200px;
border:solid thin #888; padding:0px; border-radius:4px;
background-color:#ccc;">');
var svg = document.createElementNS('http://www.w3.org/2000/svg',"svg");
svg.setAttributeNS(null,"viewBox","0 0 200 200");
$('div').append(svg);
var square = document.createElementNS('http://www.w3.org/2000/svg',"rect");
square.setAttributeNS(null,"width","200");
square.setAttributeNS(null,"height","x","0");
square.setAttributeNS(null,"y","style","fill:#FF0000");
$('svg').append(square);
$('div').draggable({
handle: 'rect'
}).resizable({
aspectRatio: 1.0
});
