从纸张到纸张 2 的 Snap Svg 复制路径组，适合内部响应 div

Snapsvg copy path group from paper1 to paper2, fit inside responsive div

JSFIDDLE here of my issue. 巴西地区应加载到模式中。

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

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

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

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 内容 OK，但它在模态上不可见。检查时我可以看到它在右边。如何在 bootstrap 上的 svg 中将 Brazil svg 组（例如）居中？

首先，您可能想要 clone() 巴西 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})

嘿，很快，它现在应该有巴西地图了。

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

jsfiddle