将 Svg 复制路径组从纸张捕捉到纸张 2，适合响应式 div

Posted 2023-02-24

【中文标题】将 Svg 复制路径组从纸张捕捉到纸张 2，适合响应式 div

【英文标题】：Snapsvg copy path group from paper1 to paper2, fit inside responsive div

【发布时间】：2017-08-31 12:52:55

【问题描述】：

JSFIDDLE here of my issue. 巴西区域应该在模态中加载。

学习snap 并尝试从世界地图中获取一个区域并将其复制到引导模式中。因此，点击一个区域，该区域本身的图像将用于模态。

我已经实现了这一点，但形状偏离了新画布的右侧。我知道这与viewbox 和转换克隆的 svg 组的坐标有关。我如何“使形状适合视图框？

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

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

【问题讨论】：

您是否将 <g> 放入正确的 SVG XML 代码中？或者只是把它扔在那里，在模态里？

您好，SVG 已正确放置在 html 中。在检查时，我看到“形状”在 svg 视图框的右侧。这是因为它来自一个大地图文件，并且一直位于 0, 0 的右侧。我需要调整它的大小并相对于 0,0 重新定位它。 bbox 的左上角排序 = 0,0

如果你在 jsfiddle 上提供一个最小的例子会很有用。基本上我可能会考虑在元素上做一个 getBBox()，然后考虑它的 x,y,width,height，修改 svg viewBox 以考虑到这一点。

嗨@Ian，我添加了一个JSFiddle。谢谢

【参考方案1】：

首先，您可能想要 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

【讨论】：

嗨@Ian，你摇滚！谢谢你。

嘿@Ian，谢谢。我对 SVG 非常陌生，无法处理概念。您对如何使提取的区域彼此保持相同的比例有什么建议吗？谢谢！

你的意思是纵横比还是比例（所以一个小国家看起来很小）。

我想保留纵横比，但让每个区域都按比例显示。所以小的会变小，大的会更占空间。我正在尝试锁定以模态为中心的 200x200 px 框，然后用 svg 填充此空间，并在 svg 视口中以缩放为中心的区域。我已经做了几个小时了！感谢您的帮助！

有点像设置zoom: 05，然后所有图像都以原始大小的一半相对于彼此渲染。