本教程的目的
-
了解SVG元素的特性
-
了解xmlns属性
-
了解width和height属性
-
了解viewBox属性的作用
-
了解preserveAspectRatio属性
-
实际开发应用viewBox属性
了解SVG元素特性
案例代码
在Chrome浏览器里打开如下案例,观察<svg>元素不设置width属性和height属性的默认宽高大小。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover" />
<title>了解SVG元素特性</title>
<style type="text/css">*{margin:0;padding:0;}.rich_media_content{overflow:hidden;