Question

我需要一个复杂的图形比例，以达到其容器宽度的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”，这对我的示例不起作用。

谢谢！

Answer 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">
...

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

1 个答案: