如何让 HTML 适应 SVG 缩放

Question

当我使用缩放变换缩放 SVG 时，周围的 html 不遵守这个比例并且无法调整其大小。

我有以下 SVG：

<div>
    <svg height="300" width="300" viewbox="0 0 300 300" transform="scale(1.55)"
    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xml="http://www.w3.org/XML/1998/namespace" version="1.1">
        <circle r="150px" cx="150px" cy="150px" fill="orange"/>
    </svg>
</div>
<div>
    <svg height="300" width="300" viewbox="0 0 300 300" transform="scale(1.55)"
    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xml="http://www.w3.org/XML/1998/namespace" version="1.1">
        <circle r="150px" cx="150px" cy="150px" fill="green"/>
    </svg>
</div>

由于某种原因，周围的 html 不会针对放大的 Svg 进行调整。

到目前为止，我所有的测试都是在 chrome 上进行的，并且主要使用以毫米为单位声明的 Svg。

测试时，上面的例子用比例变换，两个圆圈重叠了。

如果没有转换，它们就不会。 我希望它们在缩放时不要重叠。

如何让 Html 正确调整 Svg 的缩放比例？

提前致谢。

Answer 1

我认为问题在于，在 SVG 1.1 中，我认为没有正确定义 transform 属性在放置在根 <svg> 元素上时的行为方式。

在 SVG2 中是这样的。该行为在CSS Transforms specification 中定义。

Chrome 似乎已经实现了这一点，但 Firefox 还没有为 SVG 实现这一点。 Chrome 中的行为似乎是正确的。 <svg> 元素上的 transform 的行为与 HTML 元素相同（参见下面的示例）。

<div>
    <svg height="300" width="300" viewbox="0 0 300 300" transform="scale(1.55)"
    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xml="http://www.w3.org/XML/1998/namespace" version="1.1">
        <circle r="150px" cx="150px" cy="150px" fill="orange"/>
    </svg>
</div>
<div>
  <div style="width:300px; height:300px; background-color:green; border-radius:50%; transform:scale(1.55)">
  </div>
</div>

Answer 2

您已为您的svg 设置了固定的height 和width 和固定像素。 您必须更改 svg 的属性和实际的圆路径才能像我的示例中那样更正它。

transform 属性在我看来是你不需要的！

尝试改变它，你的 HTML 会像你想要的那样环绕。

 <div>
     <svg height="100" width="100" viewbox="0 0 200 200"
    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xml="http://www.w3.org/XML/1998/namespace" version="1.1">
     <circle r="100px" cx="100px" cy="100px" fill="orange"/>
     </svg>
 </div>
 <div>
    <svg height="100" width="100" viewbox="0 0 200 200"
    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xml="http://www.w3.org/XML/1998/namespace" version="1.1">
    <circle r="100px" cx="100px" cy="100px" fill="green"/>
    </svg>
</div>

应该可以的！