在Chrome中,为什么SVG foreignObjects不能缩放相对定位的内容？

在Chrome中，SVG foreignObjects不能缩放相对定位的内容，这是因为SVG（可缩放矢量图形）的缩放受到限制，不能直接对SVG元素应用相对定位。

要解决这个问题，可以使用CSS中的transform属性，将SVG元素的位置和大小都相对于其父元素进行计算，而不是相对于浏览器窗口。以下是一个示例CSS代码：

.container {
  position: relative;
}

svg {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(0, 0);
}

在这个示例中，SVG元素被放置在一个名为.container的父元素中，并且相对于该父元素进行定位。同时，使用transform属性将SVG元素的位置和大小都相对于其父元素进行计算，而不是相对于浏览器窗口。

使用这种方法可以使SVG元素相对于父元素进行缩放，而不会影响到其他元素。但是，需要注意的是，如果父元素的大小小于SVG元素的大小，则SVG元素可能会超出父元素的范围，需要使用其他方法来处理这种情况，例如使用overflow属性来显示滚动条。