通过svg 画出的矩形   圆形   叠加的椭圆   直线    折现    多边形    还有五角星  各种例子以及图案，还有代码

 

<!DOCTYPE html>

<html>

<head>

<meta charset=“UTF-8”>

<title></title>

</head>

<body>

<!–矩形 — >（rect）

<svg <!–viewBox=”0 0 100 100″–>>

<rect width=”100″ height=”100″ fill=”red” stroke=”blue” stroke-width=”10″   stroke-opacity=”0.9″  x=”10″ y=”10″  rx=”10″ ></rect>

</svg>

<!–圆形– > （scrcle）

<svg>

<scrcle  cx=”100″ cy=”70″  r=”60″  fill=”red”></scrcle>

</svg>

 椭圆  （ellipse）

<svg>

<ellipse cx=”100″  cy=”70″  rx=”60″ ry=”70″></ellipse>

</svg>

 

<!–叠加的椭圆–>

<svg>

<ellipse cx=”100″  cy=”70″  rx=”70″ ry=”50″ fill=”skyblue”></ellipse>

<ellipse cx=”100″  cy=”60″  rx=”60″ ry=”40″ fill=”blue”></ellipse>

<ellipse cx=”100″  cy=”50″  rx=”50″ ry=”30″ fill=”green”></ellipse>

</svg>

 

<!–直线–>

<svg>

<line x1 =”50″ x2=”50 ”  y1=”100″  y2=”100″ fill=”red”  stroke=”red” stroke-width=”1″ stroke-linecap=”round” > </line>

</svg> 

 

 

<!–折现 –>（polyline）

 

<svg>     在这polyling 和polygon 的区别是  polyling是折现不封闭缺口画完图型以后不再回到起点   ，而polygon封闭缺口，画完图型以后再回到起点 ，请看下面的图形

<polyline points=”50,50 100, 100 170,50″ stroke-width=”2″ stroke=”blue” fill=”red”></polyline>

</svg>

 

<!–多边形 –>     

<svg>

<polygon  points=”50,50 100, 100 170,50″ stroke-width=”2″ stroke=”blue” fill=”white”></polygon >

</svg> 

 

<!–五角星 –>

<svg>

<polygon  points=”15,100 95, 100 30,150 55,70 80,150″ stroke-width=”2″ stroke=”blue” fill=”red” fill-rule=”evenodd”></polygon >

</svg>

 

</body>

</html>

 

版权声明：本文为sanshao221原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/sanshao221/p/6207085.html