javascript - 缩放 SVG 但仅此而已？

Question

我仍在玩弄 D3 并绘制 SVG 元素，我决定尝试制作一个可以根据触控板(双指触摸扩展)和可能是 shift + 滚轮移动进行缩放的图形，但离开其他一切照原样。当我尝试这些 Action 时，我注意到整个页面都在缩放。不幸的是，我不知道如何让它发挥作用。

$('#target').html('<svg height="200" width="200"><rect width="100" height="100" x="50" y="50" fill="red" /></svg>');

#top, #bottom {
    position: fixed;
    left: 0;
    background-color: #000;
    height: 25px;
    width: 100%;
}
#target {
    margin: 25px 0;
}
#top {
    top: 0;
}
#bottom {
    bottom: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="top"></div>
<div id="target"></div>
<div id="bottom"></div>

所以，这是我想出的规则:

• 顶部和底部的 DIV 无法缩放。必须保持比例因子 1。
• 更改浏览器尺寸不会更改 SVG 的比例。
• 使用任何缩放方法(双指缩放、shift + 滚轮等)应该只会影响 SVG。
• 缩放 SVG 以使绘制的矩形不在视口(viewport)之外，不应阻止我们滚动或拖动以查看 SVG 的其余部分。

有谁知道如何制作这样的作品？也许某个地方有教程可以解释这一点？

谢谢!

PS - 如果 iframe 有助于解决此问题，我不反对使用 iframe。

Answer 1

因此，经过大量实验，我使用以下方法完成了这项工作:

• display: CSS 中的 flex 是让 SVG 容器占用所有可用空间的最佳解决方案。当 SVG 较大时，放置溢出:在该容器上滚动会有所帮助。
• 在文档和容器上放置一个“滚动”监听器，并在 scrollWheel 值为 120 或 -120 时阻止默认/停止立即传播。这允许在任何地方滚动(这很好)，但您随后可以在容器上使用此信息进行“缩放”。
• 在 SVG 上使用 viewBox 属性而不是在 CSS 中缩放。如果您使用缩放，则 SVG 变得像素化到您缩放它越大。但是，调整 SVG 的高度/宽度，同时将 viewBox 保持在“0 0 [width] [height]”，无论缩放多少，它都能保持清晰。