javascript - Snap Svg 复制路径组从一张纸到另一张纸 2，适合响应式 div

Question

JSFIDDLE here of my issue.巴西地区应在模态内加载。

学习 snap 并尝试从世界地图中获取区域并将其复制到 Bootstrap 模式中。所以点击一个区域，该区域本身的图像就会用在模态上。

我已经做到了，但是形状偏离了新 Canvas 的右侧。我知道这与克隆的 svg 组的 viewbox 和转换坐标有关。我如何“使形状适合 View 框？”

这是我复制图像的代码，当然是行不通的。

var m = Snap('#world-map');
var d = Snap('#svg-region');
var regionSVG = m.select('#Brazil');
var p = Snap.parse(regionSVG);
var g = d.append(p);

这可以复制 SVG 内容，但它在模式中不可见。检查时我可以看到它在右边。如何在 Bootstrap 的 svg 中将 Brazil svg 组(例如)居中？

Answer 1

首先，您可能想要克隆() Brazil g 元素，或者可能使用“use”元素来引用它。

在这种情况下，我只是简单地克隆了它，并将它添加到模态 svg 中......

var p = regionSVG.clone();
d.append(p);

然后我们可以获得边界框，并从中创建一个 viewBox...

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

嘿，转眼间，它现在应该有巴西 map 了。

您可能希望每次都对模态中的元素执行诸如 remove() 之类的操作以进行清理。

jsfiddle