缩放和重新定位 SVG.js 困难

Question

我正在使用 svg.js 在浏览器中操作 SVG。我正在做的大部分事情都相对简单，但我在 scaling/positioning 一些对象上遇到了一些困难。

我有一个包含“Pin”图标的 SVG。您可以单击 SVG 来缩放它（只是调整它的大小以填充浏览器视口），进而调整其所有子项的大小，包括 Pin。我需要将此图标缩小到其原始大小 36px x 36px 并重新定位它，以便 Pin 的底部中心位于它最初所在的位置。我已经缩小了尺寸，但是重新定位的部分让我失望了。

一些例子说明：

100% 缩放，引脚尺寸为 36px x 36px。
放大了 9.77241379，引脚缩小到其基本尺寸 36px x 36px。使用 svg.js scale() 方法在引脚的中心点进行缩放，使其在 space.
中浮动

当父容器放大时，我用来缩放 Pin 的内容：

scaleHotspot(hotspot) {
    const child = hotspot.first();
    const bbox = child.bbox();
    const rbox = child.rbox();
    const scale = bbox.w / rbox.w;

    hotspot.scale(scale);
}

因为 Pin 图是使用其中心点缩放的，所以它现在的位置比预期的要高。我需要确定将 Pin 向下移动多少才能使 Pin 的点位于其原始位置。

我最初认为这可行，但在不同地方进行的测试产生了奇怪的结果。

const newY = -(bbox.height / 2 - (bbox.height - (1 / scale)));

关于定位 Pin 以使其底部中心点位于未缩放版本的位置的建议？

Answer 1

使用 .transform()，您可以定义缩放的中心。使用 .bbox() 在当前用户 space 中找到该点。由于这些坐标已经包含 pre-existing 转换，设置 relative 标志以在顶部添加缩放：

scaleHotspot(hotspot) {
    const bbox = hotspot.bbox();
    const rbox = hotspot.rbox();
    const scale = bbox.w / rbox.w;
    const center = bbox.x + bbox.w / 2;
    const bottom = bbox.y + bbox.h;

    hotspot.transform({scale: scale, cx: center, cy: bottom}, true);
}

缩放和重新定位 SVG.js 困难

Scaling and repositioning with SVG.js difficulties

javascript

svg

svg.js