复杂 SVG 图形 HTML/CSS 的比例缩放答案

【问题标题】：Proportional Scaling of Complex SVG Graphic HTML/CCS复杂 SVG 图形 HTML/CSS 的比例缩放
【发布时间】：2014-01-15 23:46:43
【问题描述】：

我需要将复杂的图形缩放到其容器宽度的 100%。

这是我到目前为止的进展： http://jsfiddle.net/yT9YK/1/

<svg
    xmlns="http://www.w3.org/2000/svg"
    width="100%"
    height="100%"
    viewBox="0 0 100 100"
    preserveAspectRatio="xMinYMin">

我尝试了 preserveAspectRatio 的各种设置，我引用的一个示例（此处：How to make a <svg> element expand or contract to its parent container?）将 viewBox 设置为“0 0 1 1”，这不适用于我的示例。

谢谢！

【问题讨论】：

您是否考虑过使用您的 svg 文件作为背景图片？处理与容器相关的行为会更容易。
不，我没有。我将其用作进度步进器，并且会变得更加复杂，而且它需要是动态的。 designtickle.com/cdnmedia/2012/04/…。您认为使用 SVG 作为背景仍然可行吗？
我浏览了这些示例并尝试将 SVG 作为背景但没有成功...developer.mozilla.org/en-US/docs/Web/CSS/…
How to make svg scale?的可能重复
可能，只是我要缩放的形状不是三角形，而是更复杂的形状。我已经尝试了该链接中的一些东西，但没有成功。一整天都在想办法解决这个问题。在这一点上，我希望有人更新 Fiddle =(

标签： html css svg

【解决方案1】：

我认为问题出在您的视图框设置中。
您设置了0 0 100 100，但这不是您图像的大小。
尝试将值更改为虚线图像长度，它似乎以正确的方式缩放。
我不确定这是您想要的效果，但I created a jsfiddle 显示结果。

代码如下：

<svg
            xmlns="http://www.w3.org/2000/svg"
            width="100%"
            height="100%"
            viewBox="0 0 270 32"
            preserveAspectRatio="xMinYMin">
...

【讨论】：

正是我想要的。第一次使用带有 HTML 5 的 SVG，所以不是很熟悉。谢谢！