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。

测试时，上面的例子用缩放变换，两个圆重叠。

没有变换，他们没有。我希望它们在缩放时不要重叠。

如何通过缩放Svg来正确调整Html？

提前致谢。

Answer 1

您为height设置了固定的width和svg以及固定像素。您必须更改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>

这应该可以胜任！

Answer 2

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

在SVG2中它已经存在。行为在CSS Transforms specification。

中定义

Chrome似乎已经实现了这一点，但Firefox尚未针对SVG这样做。 Chrome中的行为似乎是正确的。 transform元素上的<svg>与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>

如何让HTML适应SVG缩放

2 个答案: