【发布时间】：2018-11-06 01:51:11
【问题描述】：
我正在制作一个用户应该能够放大和缩小的 svg 平面图布局。
当我第一次编码时，缩放功能有效，但 svg 对容器大小没有响应。我添加了 viewbox 属性以使其具有响应性，但这会干扰缩放功能 - 即使您尝试缩小它也会放大，并且缩放不像我添加 viewbox 之前那样工作。
以下是演示该问题的 2 个代码笔：
Codepen 1
没有 viewbox - svg 可以正确缩放，但不响应容器大小https://codepen.io/nicole-dsouza/pen/WJVywK
唯一的区别在于打开的 svg 标签：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="100%" height="100%">
Codepen 2
带有视图框 - svg 具有响应性，但不能正确缩放
https://codepen.io/nicole-dsouza/pen/QrexyV
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="100%" height="100%" viewBox="0 0 873 699">
谁能帮我找出导致问题的原因？我需要 svg 同时具有响应性和可缩放性。
感谢任何帮助。
【问题讨论】：
-
你为什么把d3.js标签放在这里？您永远不会使用 D3 进行缩放，而是使用 jQuery 插件。我刚刚用正确的标签编辑了你的问题。
标签： javascript jquery svg zooming