svg 圆、矩形、直线、折线、多边形

朱雀 2021-07-24 21:17 558阅读 0赞

矩形不能直接像canvas获得只有边框色的,通过设置背景色获取或fill='none'
    
    	圆:
    	  <circle cx='100' cy='100' r='50' ></circle> 
    	  
    	  cx/cy:圆心坐标
    	  r:半径
    	
    	矩形:
    		<rect width='200' height='200'  x='100' y='100' rx='30' ry='30'></rect>
    		
    		width/height:矩形宽高
    		x/y:左上角顶点坐标
    		rx/ry:顶点向两边蔓延的两个点之间画圆弧,即设置圆角
    		
    	直线(直线颜色用stroke设置,fill会失效):
    		<line x1='50' y1='50' x2='100' y2='100' ></line>
    		
    		x1/y1:初始点坐标
    		x2/y2:终点坐标
    		
        polyline折线
            会自动填充首尾连线后的封闭图形，fill='none'取消填充
            <polyline points='坐标x1 坐标y1 坐标x2 坐标y2 ...'></polyline>
            
            其中空格分割可换成逗号
    
    	polygon多边形
            会自动连接首尾成封闭图形且自动填充颜色，fill='none'取消填充
            <polygon points='坐标x1 坐标y1 坐标x2 坐标y2 ...' ></polygon>
    
    
    样式设置(可通过style="...",也能直接在标签上添加):
    	fill:'填充色',默认为黑色，none表示不填充
    	fill-opacity:'透明度'
    	stroke:'边框色'
    	stroke-width:'边框宽度'
    	stroke-opacity:'边框透明度'
    	stroke-linecap='round 线的端点为圆角'
    	
    	创建虚线，线-空白-线来赋值
    	stroke-dasharray = '10'
    	stroke-dasharray = '10, 5'
    	stroke-dasharray = '20, 10, 5'
    	
    	整体位移虚线:
    	stroke-dashoffset:数值
    	正数:向左位移,将虚线整体位移,因为虚线是循环,位移后的空位,会根据循环补充出来
    	负数:向右位移

代码示例:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .box{ 
                width:600px;
                height:600px;
                margin:0 auto;
            }
        </style>
    </head>
    <body>
        <div style="border:solid 1px orange;" class='box'>
    
            <svg  width='100%' height='100%'
            xmlns="http://www.w3.org/2000/svg">
                
                <circle cx='100' cy='100' r='50' fill='transparent' stroke='orange' stroke-width='10px'  stroke-opacity='0.5'></circle>  
                
                
                <rect width='200px' height='200px' fill-opacity='0.5' x='100px' y='100px' fill='red' rx='30' ry='30' stroke='black'></rect>    
    
                
                <line x1='50' y1='50' x2='100' y2='100' stroke='blue' stroke-width='5'stroke-opacity='0.5'></line>
                
          	 	<polyline points='50 100 80 201 30 300' stroke='blue' fill='none' stroke-width='2'></polyline>
    
           		<polygon points='50 100 80 201 30 300' stroke='blue' fill='none' stroke-width='2'></polygon>
    
            </svg>
            
            
        </div>
    
        
    </body>
    </html>