svg 高宽随父元素自适应

2018/07/18 15:48
阅读数 95
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div style='width:30%;height:600px'>
            <svg viewBox="0,0,640,480" >
                <rect x="0" y="0" width="100%" height="100%" fill="green"/>
                <rect x="10" y="10" width="100" height="100" fill="orange" />
                <rect x="200" y="300" width="90" height="90" fill="orange" />
                <circle id='eyunxiaojie' cx="400" cy="1500" r="50" fill="gray" />
            </svg>
    </div>
</body>

</html>

  viewBox的四个参数分别代表:最小X轴数值;最小y轴数值;宽度;高度。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部