html - 响应式 SVG 问题

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 的大小却发生了变化。更新 Fiddle 14/03/16 https://jsfiddle.net/adotellison/euyyze4z/2/

谁能解释为什么会这样？以及如何解决这个问题？

我在 web-kit 浏览器中看到了这个问题。

Answer 1

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

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

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

我猜这只是一个错误，您无法真正采取任何措施来完全修复它。

您可以将 preserveAspectRatio="none"添加到 SVG 标签。我认为它在技术上拉伸(stretch)它以适应可用空间，但由于它只有一两个像素，因此并不引人注意。

我在这个页面上发现:https://css-tricks.com/scale-svg/这位女士合着了关于 SVG 的书:http://shop.oreilly.com/product/0636920032335.do