Question

我有一个不适合我的div的svg图像。当我重新调整我的svg大小时，div不会重新调整大小以适合svg。 svg的最大大小应为700px，然后在浏览器窗口重新调整大小时重新调整大小。我让它使用Div1中的另一个元素将div1拉伸到max-width:700px，但是当我删除该元素时它停止工作。

我删除了小提琴，因为问题已经解决。

Answer 1

如果你有一个svg图像，它会增长到容器允许的大小。
这是宽度和高度。因此，如果svg元素如下所示：<svg height="100%" width="100%">
它将扩展到容器大小。

我使用css来修改如何控制它的大小：

.svg-class  { //put this class on your svg element
     width: 100%;
}

只要父容器中有空间，它就会增长。现在我们要将其限制为700px：只需将max-width：700px添加到大小控件：

.svg-class {
    width: 100%;
    max-width: 700px;
}

现在它只会增长到700px宽度。即使容器更大。

body {
  margin: 0;
}
.top {
  background-color: black;
}
.sprite {
  max-width: 700px;
  width: 100%;
}

<div class="top">
  <svg class="sprite" viewBox="0 0 100 100">
    <rect x="0" y="0" width="50" height="50" fill="red" />
    <rect x="50" y="0" width="50" height="50" fill="yellow" />
    <rect x="0" y="50" width="50" height="50" fill="green" />
    <rect x="50" y="50" width="50" height="50" fill="blue" />
  </svg>
</div>

Answer 2

我找到了答案。我在svg周围添加了图像标签并设置了宽度。立即行动。

Svg和div问题

2 个答案: