[javascript svg fill stroke stroke-width x1 y1 x2 y2 line stroke-opacity fill-opacity 属性讲解] svg fill stroke stroke-width stroke-opacity fill-opacity line绘制线条属性讲解

程序员金鹏技术 2022年11月21日

0 收藏 523 点赞 2,903 浏览 1133 个字

 <!DOCTYPE html>
 <html lang='zh-cn'>
 <head>
 <title>Insert you title</title>
 <meta name='description' content='this is my page'>
 <meta name='keywords' content='keyword1,keyword2,keyword3'>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <link rel='stylesheet' type='text/css' href='./css/index.css' />
 <script type='text/javascript' src='./js/jquery-1.12.1.min.js'></script>
 <style type='text/css'>
 html,body,div,svg {
     margin: 0; padding: 0;
 } #wrap {
     width: 500px; height: 450px; border: 1px solid #999; border-radius: 2px; margin: 25px auto;
 } svg {
     height: 100%; width: 100%;
     /* 在谷歌浏览器中如果不指定svg的大小,那么使用默认的300*150大小(将焦点放置在调控台{Element}中的标签上可以检查),但是在火狐中表现却不同
     即使我们不指定svg的大小,指定父元素的大小,那么svg的大小将继承父元素;
      */
 }
 </style>
 <script type='text/javascript'>
     $( function(){     } );
 </script>
 </head>
 <body>
     <div id='wrap'>
         <svg xmlns='http://www.w3.org/2000/svg' version='1.1'>
          <line x1='195' y1='150' x2='350' y2='310' fill=' #09F3C7 ' stroke='#C7F309'
                 stroke-width='3' stroke-opacity = '.3' fill-opacity = '.9'
             ></line>   <!-- 参数解析 x1 y1 x2 y2 起止点坐标  如果想设置为透明(none/transparent)虽然none与transparent效果相同但是机理完全不同none是没有填充 transparent
                                 是透明, 勾勒描边为无 style = "fill:#09F3C7 ;stroke:#C7F309;" stroke-opacity = '.3' fill-opacity = '.9'-->
         </svg>
     </div>
 </body>
 </html>