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

最新推荐文章于 2022-08-25 17:09:35 发布

神奇大叔

最新推荐文章于 2022-08-25 17:09:35 发布

阅读量1.1k

点赞数

分类专栏： svg 文章标签： svg

本文链接：https://blog.csdn.net/weixin_43294560/article/details/105011593

版权

svg 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

矩形不能直接像canvas获得只有边框色的,通过设置背景色获取或fill='none'

	圆:
	  <circle cx='100' cy='100' r='50' ></circle> 
	  
	  cx/cy:圆心坐标
	  r:半径
	  
	椭圆:
		<ellipse cx="300" cy="150" rx="200" ry="80"/>
			cx/cy:椭圆圆心坐标
			rx 属性定义水平半径
			ry 属性定义垂直半径
		
	矩形:
		<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>
        <polyline points='坐标x1,坐标y1 坐标x2,坐标y2 ...'></polyline>

	polygon多边形
        会自动连接首尾成封闭图形且自动填充颜色，fill='none'取消填充
        <polygon points='坐标x1 坐标y1 坐标x2 坐标y2 ...' ></polygon>
        <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">
            <!-- 圆cx/cy中心点坐标 r半径 fill填充色(默认为黑色) stroke边框色 stroke-width边框宽度,可以将样式属性放在style中-->
            <circle cx='100' cy='100' r='50' fill='transparent' stroke='orange' stroke-width='10px'  stroke-opacity='0.5'></circle>  
            
            <!-- 矩形 width/height高宽 x/y左上顶点坐标 rx/ry顶点向两边蔓延的两个点之间画圆弧,即设置圆角 fill填充色(默认为黑色) stroke边框色 stroke-width边框宽度 -->
            <rect width='200px' height='200px' fill-opacity='0.5' x='100px' y='100px' fill='red' rx='30' ry='30' stroke='black'></rect>    

            <!-- 直线  stroke-opacity设置边框透明度 fill-opacity设置填充色透明度-->
            <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>

神奇大叔

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
svg 圆、矩形、直线、折线、多边形

矩形不能直接像canvas获得只有边框色的,通过设置背景色获取圆: <circle cx='100' cy='100' r='50' ></circle> cx/cy:圆心坐标 r:半径矩形: <rect width='200' height='200' x='100' y='100' rx='30' ry='30'&g...
复制链接

扫一扫

专栏目录