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

时间:2013-12-28 16:24:28

标签: html css svg

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

谢谢!

1 个答案:

答案 0 :(得分:2)

我认为问题出在您的视箱设置中 您设置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">
...