Question

我还在玩D3并绘制SVG元素，我决定尝试制作一个可以根据跟踪板（两指触摸扩展）进行缩放的图形，也许是一个移位+滚轮移动，但是离开其他一切都是。我注意到当我尝试这些动作时整个页面都会缩放。不幸的是，我不知道如何做到这一点。

$('#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的比例。
使用任何缩放方法（捏缩放，移位+滚轮等）只会影响SVG。
缩放SVG以使绘制的矩形不在视口中不应阻止我们滚动或拖动以查看SVG的其余部分。

有谁知道怎么做这样的工作？也许有一个教程可以解释这个？

谢谢！

PS - 如果有助于解决这个问题，我不会使用iframe。

Answer 1

因此，经过多次实验，我使用以下方法完成了这项工作：

display：CSS中的flex是使SVG容器占用所有可用空间的最佳解决方案。放置溢出：滚动该容器有助于SVG更大。
放一个＆＃34;滚动＆＃34;当scrollWheel值为120或-120时，文档和容器上的监听器以及preventDefault / stopImmediatePropagation。这允许在任何地方滚动（这是好的），但是你可以在容器上使用这些信息来进行＆＃34;缩放＆＃34;。
使用SVG上的viewBox属性而不是CSS中的缩放。如果使用比例，则SVG会变得像素化到您缩放它的较大值。但是，调整SVG的高度/宽度，同时将viewBox保留在＆＃34; 0 0 [宽度] [高度]＆＃34;无论你多大程度地扩展它，都要保持清晰。

扩展SVG，但没有其他？

1 个答案: