[javascript svg fill stroke stroke-width rx ry ellipse 属性讲解] svg fill stroke stroke-width ellipse 绘制椭圆属性讲解

 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      500px; height: 450px; border: 1px solid #999; border-radius: 2px; margin: 25px auto;
17 }
18 
19 svg {
20     height: 100%;  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          <ellipse cx='250' cy='225' rx='150' ry='105' fill=' #09F3C7 ' stroke='#C7F309' stroke-width = '3'></ellipse>   <!-- 参数解析 cx cy 圆心坐标  rx ry 为水平半径和垂直半径  默认填充形式 填充颜色为黑色 如果想设置为透明(none/transparent)虽然none与transparent效果相同但是机理完全不同none是没有填充 transparent是透明, 勾勒描边为无 style = "fill:#09F3C7 ;stroke:#C7F309;" -->
36         </svg>
37     </div>
38 </body>
39 </html>