svg - 使用 currentScale 放大 SVG

Question

我有一个网页，其中有一个 SVG 框<svg id='graph'>...</svg>。

我想为用户提供放大 SVG 框的可能性。

document.getElementById("graph").currentScale*=2;例如，如果我想将盒子的大小加倍，我会为此目的使用。

问题是所有窗口都调整了大小，甚至是框外的 HTML 元素。

请问您知道这个问题的根源吗？

Answer 1

为了仅将缩放应用于 svg ，请使用此...

<svg>
<g transform="scale(2)">

</g>
</svg>

Answer 2

在不知道您使用的是哪个浏览器的情况下，这可能是不正确的，但如果您使用的是 Internet Explorer 或 Microsoft Edge 以外的任何浏览器，则可能无法实现 currentScale。您可以通过在不同的浏览器中尝试这个 JSBin来自己测试它并查看它的扩展范围。

深入研究，谷歌搜索“SVG currentScale”发现这些来自谷歌和Mozilla讨论类似问题的错误线程。Mozilla 线程讨论了它是专门为保持一致性而做出的选择。SVG 的 currentScale 仅适用于容器元素，不适用于内部元素。这可能会干扰内部 SVG 元素上使用的 zoomAndPan 等功能。此外，更好的跨浏览器解决方案已经到位，例如通过 transform 属性实现的 scale()。