Html 响应SVG问题

我已经将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的大小会发生变化。 2016年3月14日更新小提琴

有人能解释为什么会这样吗？如何解决这个问题

---

我在WebKit浏览器中看到过这个问题。

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

问题只在于SVG的内容。如果我在SVG标记上放置CSS边框，边框的大小将保持正确，但在调整大小时内部的形状会摆动

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

我猜这只是一个bug，你真的无法做任何事情来强制修复它

您可以向SVG标记添加preserveSpectratio=“none”。我认为从技术上讲，这是在扩展它以适应可用空间，但因为它只有一两个像素，所以不明显

我在这一页上发现：

---

这位女士实际上是SVG的合著者：

在Chrome中看不到任何问题。您希望发生什么？您可能需要解释术语“大小震动”的含义：）我已经更新了小提琴，使SVG颜色更亮，希望问题会更明显。我所说的“大小上的震动”是指SVG，在一个短暂的时间内没有缩放大小，然后突然跳转到新的维度。我希望能找到一个解决方案，因为将来我想用这种技术来创建CSS样式无法创建的更复杂的形状。你能想到我应该研究的任何方向来找到解决方案吗？我只是在玩CSS技巧中的SVG代码笔示例，SVG的大小没有增加。他们在做什么不同的事情吗？它看起来确实更好，但我认为问题仍然存在。我认为它可能只是因为更大的图形比例而不那么引人注目。我将您的所有元素添加到kiwi示例中，在我将SVG viewbox设置为与您的选项卡形状相同的大小之前，它一直运行良好。612-->480. 然后扭动又回来了。尝试将图形的比例增加两到三倍，看看是否有帮助。这解决了Chrome和Firefox中的问题，但Safari和Opera中仍然存在这个问题。这是一个更新的代码笔，我在Chrome48中仍然存在这个问题。当我更新到49时，它消失了。