标签：
1 <!DOCTYPE html> 2 <html lang=‘zh-cn‘> 3 <head> 4 <title>Insert you title</title> 5 <meta name=‘description‘ content=‘this is my page‘> 6 <meta name=‘keywords‘ content=‘keyword1,keyword2,keyword3‘> 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 8 <link rel=‘stylesheet‘ type=‘text/css‘ href=‘./css/index.css‘ /> 9 <script type=‘text/javascript‘ src=‘./js/jquery-1.12.1.min.js‘></script> 10 <style type=‘text/css‘> 11 html,body,div,svg { 12 margin: 0; padding: 0; 13 } 14 15 #wrap { 16 width: 500px; height: 450px; border: 1px solid #999; border-radius: 2px; margin: 25px auto; 17 } 18 19 svg { 20 height: 100%; width: 100%; 21 /* 在谷歌浏览器中如果不指定svg的大小,那么使用默认的300*150大小(将焦点放置在调控台{Element}中的标签上可以检查),但是在火狐中表现却不同 22 即使我们不指定svg的大小,指定父元素的大小,那么svg的大小将继承父元素; 23 */ 24 } 25 </style> 26 <script type=‘text/javascript‘> 27 $( function(){ 28 29 } ); 30 </script> 31 </head> 32 <body> 33 <div id=‘wrap‘> 34 <svg xmlns=‘http://www.w3.org/2000/svg‘ version=‘1.1‘> 35 <rect x=‘195‘ y=‘150‘ height=‘150‘ width=‘110‘ fill=‘ #09F3C7 ‘ stroke=‘#C7F309‘ 36 stroke-width=‘3‘ rx=‘5‘ ry=‘5‘ 37 ></rect> <!-- 参数解析 x y 圆心坐标 width height 宽高 rx ry 水平和垂直圆角的值 默认填充形式 填充颜色为黑色 如果想设置为透明(none/transparent)虽然none与transparent效果相同但是机理完全不同none是没有填充 transparent是透明, 勾勒描边为无 style = "fill:#09F3C7 ;stroke:#C7F309;" --> 38 </svg> 39 </div> 40 </body> 41 </html>
标签：
原文地址：http://www.cnblogs.com/mysearchblog/p/5963160.html
