Question

我已将SVG设置为其父容器的100％宽度，但是当父容器以响应方式缩放时，SVG会在尝试保持其宽高比时大小颠簸。

在尝试将SVG与兄弟DIV对齐时，这是一个问题，如本示例所示;

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" viewBox="0 0 480 29.8">
<path style="fill:blue;" d="M480,29.8H0v-18C0,5.3,5.3,0,11.8,0h456.4c6.5,0,11.8,5.3,11.8,11.8L480,29.8L480,29.8z"/>
</svg>

<div class="rect" style="width:100%;background:red;height:100px;"></div>

正如您在更改窗口宽度时所看到的那样，DIV会按预期进行缩放，SVG的大小会逐渐变大。 更新小提琴14/03/16 https://jsfiddle.net/adotellison/euyyze4z/2/

任何人都可以解释为什么会这样吗？以及如何解决这个问题？

我在网络工具包浏览器中看到了这个问题。

Answer 1

看起来SVG的部分像素定位计算与其他HTML元素的完成方式不同。

问题仅在于SVG的内容。如果我在SVG标签上放置一个CSS边框，边框保持适当的大小，但调整大小时内部的形状会摆动。

我在Chrome中看到了这个问题，但在jsfiddle中没有看到firefox，但如果我将SVG放在一个文件中并将其作为HTML中的图像引用，我会在两者中得到奇怪的行为。

我猜这只是一个错误，你无法做任何事情来完成它。

您可以将preserveAspectRatio =“none”添加到SVG标记。我认为它在技术上将其拉伸以适应可用空间，但由于它只有一两个像素，所以它并不明显。

我在此页面上发现：https://css-tricks.com/scale-svg/ 这位女士在字面上共同撰写了关于SVG的书：http://shop.oreilly.com/product/0636920032335.do

响应式SVG问题

1 个答案: