Question

我正在制作一个svg平面布局布局，用户应该可以放大和缩小。

当我第一次编码时，缩放功能起作用，但svg不响应容器大小。我添加了viewbox属性以使其响应，但这会干扰缩放功能 - 即使您尝试缩小它也会放大，并且缩放不会像我添加视图框之前那样工作。

以下是2个代码说明问题：

Codepen 1

没有viewbox - svg正确缩放，但没有响应容器大小<br/> 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

使用viewbox - 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同时响应和缩放。

感谢任何帮助。

Answer 1

删除width和height属性，然后使用视图框。并将svg包装在响应式对象包装器中。见https://codepen.io/vcurd/pen/bKEdQe

<div class="svg-wrapper">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 890 150">

SVG ViewBox打破缩放功能

Codepen 1

Codepen 2

1 个答案: