使用JS缩放和居中SVG

学习SVG /快照。随着一些帮助，我可以从地图上拉一个区域，它加载到每the fiddle here.使用JS缩放和居中SVG

我现在想通过200px div来保持200px内SVG，保持其纵横比模式，以规模，所以每个区域在模式将适合在上面的框中，但仍然对其他地区的规模。

var m = Snap('#world-map'); 
    var d = Snap('#svg-region'); 
    var regionSVG = m.select('#' + region); 
    var p = regionSVG.clone(); 
    d.append(p); 
    var bb = regionSVG.getBBox(); 

    var vb = bb.x + ' ' + bb.y + ' ' + bb.width + ' ' + bb.height; 
    d.attr({ 
    viewBox: vb 
    })

我试图在BBOX创建一个规模的加工数据，但悲惨地失败了。

function zoomBBox(bbox) 
{ 
    var zbbox, ratio, diffx, diffy; 
    var length = 200; 

    if (bbox.width > bbox.height) { 
     ratio = bbox.width/length; 
     zbbox.width = length; 
     zbbox.height = bbox.height * ratio; 
    } else { 
     ratio = bbox.height/length; 
     zbbox.width = bbox.width * ratio; 
     zbbox.height = length; 
    } 

    diffx = (zbbox.width - length)/2; 
    diffy = (zbbox.height - length)/2; 

    zbbox.x = bbox.x + diffx; 
    zbbox.y = bbox.y + diffy; 

    return zbbox; 
}

来源

2017-09-01 TheRealPapa

您是否尝试将css'max-height：100％;'添加到svg中？ – Bellian

只需添加

.modal-body svg { 
    max-width: 100%; 
    max-height: 100%; 
}

https://jsfiddle.net/0djhebes/7/

来源

2017-09-01 10:32:02 caramba

嗨@caramba，谢谢你。但是我如何将每个svg与其他人相对比？现在，一个小区域就像一个大片区域一样填满盒子，失去了它的定义并扩展了它的内容。在这个项目上，我还在该地区的其他标志也得到缩放。我认为解决方案是在'viewBox'中。 – TheRealPapa

@TheRealPapa现在我明白了。嗯。这更棘手。 – caramba

你只需要CSS的强大功能：d

您需要在SVG＃SVG区域来定义通过CSS的模式内高度&你希望它们出现的最大宽度。例如100像素& 100px的，他们将这个盒子

#svg-region{width:100px; height:100px;}

内呈现为对准它，使用的包装器＃SVG区域与下面的CSS（我认为这应该工作，没有测试以垂直和水平对齐）

.wrapper{display:flex; jusfity-alignment:center; align-item:center;}

来源

2017-09-01 12:29:20 Littlemad

使用JS缩放和居中SVG

回答

相关问题