如何让HTML调整为SVG缩放

当我使用缩放变换缩放SVG时，周围的html不遵守此比例尺，并且无法调整其大小。如何让HTML调整为SVG缩放

我有以下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。

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

没有转换他们没有。我希望它们在缩放时不会重叠。

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

在此先感谢。

来源

2017-04-10 Kezza

您已经为您的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>

这应该做的工作！

来源

2017-04-10 13:16:35 Felix

是的，我已经看到了存在的方式缩放差Firefox和Chrome之间的处理，这增加了更多的复杂性，我的问题。我最初使用Chrome。浏览器都没有像预期那样完成这项工作。 – Kezza

我认为问题在于，在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>

来源

2017-04-10 15:08:13

这似乎不起作用。至少不是在铬。视图框变大，但里面的所有内容都保持原始尺寸。这可能是因为在我的实际SVG中，我使用毫米单位。 – Kezza

我的例子的目的是要表明，SVGs都表现一样与变换其他HTML元素。就这样。 –

如何让HTML调整为SVG缩放

回答

相关问题