我目前正在以SVG格式绘制我的国家的地图,该地图分为地区和一些城镇。 当我将鼠标悬停在上面时,我想对所有比例进行缩放,这已经成功地进行了工作。但是现在,当我将鼠标悬停在其所在的区域上时,我也想对城镇进行缩放。由于比例的中心是“ t匹配。有人知道如何解决这个问题吗?
JavaScript
function scaleObject(object , ratio, cx, cy) {
object.scale(ratio, ratio, cx, cy);
}
for (var i = 0; i < okresy.length; i++) {
if (okresy[i].data('vlastnik') == 'VODARNA') {
}
okresy[i].mouseover(function(e) {
document.getElementById('okres_name').innerHTML = this.data('id');
currentOkres = this;
var bbox = currentOkres.getBBox();
var cx = bbox.cx;
var cy = bbox.cy;
var scaleRatio = 1.3;
currentOkres.animate( scaleObject(currentOkres, scaleRatio), 200, 'easeIn');
currentOkres.attr({ 'stroke': 'white', 'stroke-width': '2' });
console.log(cx + "," + cy);
currentOkres.toFront();
if (currentOkres.data('child1') != undefined) {
currentOkres.animate(scaleObject(findPathById(okresy, currentOkres.data('child1')), scaleRatio + .2), 200, 'easeIn');
findPathById(okresy, currentOkres.data('child1')).attr({ 'stroke': 'white', 'stroke-width': '2' });
findPathById(okresy, currentOkres.data('child1')).toFront();
if (currentOkres.data('child2') != null) {
findPathById(okresy, currentOkres.data('child2')).scale(1.3, 1.3, currentOkres.scale('cx'), currentOkres.scale('cy'));
findPathById(okresy, currentOkres.data('child2')).attr({ 'stroke': 'white', 'stroke-width': '2' });
findPathById(okresy, currentOkres.data('child2')).toFront();
if (currentOkres.data('child3') != null) {
findPathById(okresy, currentOkres.data('child3')).scale(1.3, 1.3, currentOkres.scale('cx'), currentOkres.scale('cy'));
findPathById(okresy, currentOkres.data('child3')).attr({ 'stroke': 'white', 'stroke-width': '2' });
findPathById(okresy, currentOkres.data('child3')).toFront();
}
}
}
});
okresy[i].mouseout(function(e) {
this.scale(10/13, 10/13);
this.attr({ 'stroke-width': '0' });
if (this.data('child1') != undefined) {
findPathById(okresy, this.data('child1')).node.style.opacity = 1;
findPathById(okresy, this.data('child1')).scale(10 / 13, 10 / 13);
if (this.data('child2') != null) {
findPathById(okresy, this.data('child2')).node.style.opacity = 1;
if (this.data('child3') != null) {
findPathById(okresy, this.data('child3')).node.style.opacity = 1;
}
}
}
});
}