响应式 SVG 问题

Posted 2023-03-06

【中文标题】响应式 SVG 问题

【英文标题】：Responsive SVG issue

【发布时间】：2016-06-25 15:27:09

【问题描述】：

我已将 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"  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/

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

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

【问题讨论】：

在 Chrome 中未发现问题。你期望发生什么？

您可能需要解释“大小颠簸”一词的含义:)

我已经更新了 Fiddle，使 SVG 的颜色更亮，因此希望问题会更加明显。我所说的“大小颠簸”是指 SVG，在短时间内没有按比例缩放，然后突然跳到它的新维度。这种情况会以很小的增量发生，给人一种颠簸的感觉。

【参考方案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

【讨论】：

我希望找到一个解决方案，因为将来我想使用这种技术来创建 CSS 样式无法创建的更复杂的形状。你能想到我应该研究的任何方向以找到解决方案吗？

我一直在玩 CSS-Tricks 中的 SVG Codepen 示例，但 SVG 的大小没有跳跃。他们在做不同的事情吗？ codepen.io/anon/pen/grwqoY

它看起来确实更好，但我认为问题仍然存在。我认为它可能只是因为图形的规模更大而不太明显。我将您的所有元素添加到 kiwi 示例中，并且它运行良好，直到我使 SVG 视图框的大小与您的选项卡形状相同。 612--> 480。然后扭动又回来了。尝试将图形的比例增加两到三倍，看看是否有帮助。

这修复了 Chrome 和 Firefox 中的问题，但在 Safari 和 Opera 中仍然存在。这是更新的 Codepen codepen.io/anon/pen/grwqoY

我在 chrome 48 中仍然遇到问题。当我更新到 49 时它就消失了。