http://thenewcode.com/744/Make-SVG-Responsive
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"> <title>监控视图</title> <style type="text/css"> .svg-container { display: inline-block; position: relative; width: 100%; padding-bottom: 100%; vertical-align: middle; overflow: hidden; } </style> </head> <body> <div class="svg-container"> <svg version="1.1" viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet" class="svg-content"> <circle fill="#F7941E" stroke="#231F20" stroke-width="10" stroke-miterlimit="10" cx="250" cy="250" r="200" opacity="0.6" /> </svg> </div> </body> </html>
可以尝试去改变svg-container的width属性，里面的图片会自适应哦！具体原理在慢慢探究吧