html——svg

最新推荐文章于 2024-07-17 16:17:24 发布

taojYang

最新推荐文章于 2024-07-17 16:17:24 发布

阅读量108

点赞数

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

本文链接：https://blog.csdn.net/weixin_43293451/article/details/93497957

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8"><!--文档的元数据，解决中文乱码-->
	<title>svg</title>
	<style type="text/css">
		svg{
			display: inline-block;
		}
	</style>
</head>
<body>
	<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
		<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"></circle><!--圆-->
	</svg>
	<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
		<rect width="700px" height="100px" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"></rect>
	</svg><br />
	<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
		<rect x="50" y="20" width="200px" height="100px" style="fill:red;stroke-width:5;stroke:pink;fill-opacity:0.1;stroke-opacity:0.9"></rect><!--opacity数值越小越透明-->
	</svg>
	<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
		<rect x="50" y="20" rx="20" ry="20" width="200px" height="100px" style="fill:red;stroke-width:5;stroke:pink;fill-opacity:0.1;stroke-opacity:0.9"></rect><!--opacity数值越小越透明-->
	</svg><br />
	<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
		<ellipse cx="150px" cy="80px" rx="100" ry="50" style="fill:red;stroke-width:5;stroke:purple;"></ellipse>
	</svg><br />
	<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
		<line x1="50" y1="10" x2="200" y2="200" style="stroke: rgb(255,0,0);stroke-width:2px"></line>
	</svg>
	<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
		<polygon points="200,10 250,50 160,80" style="fill:lime;stroke:purple;stroke-width:1px"></polygon>
	</svg><br />
	<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
		<polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:1px;fill-rule: nonzero;"></polygon>
	</svg>
	<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
		<polygon width="400" height="300" points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5px;fill-rule: evenodd;"></polygon>
	</svg><br />
	<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
		<polyline cx="50" cy="10" points="0,40 40,40 40,80 80,80 80,120 120,120" style="fill:white;stroke:red;stroke-width:4"></polyline>
	</svg><br />

</body>
</html>

在这里插入图片描述

taojYang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html——svg

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>svg</title> <style type="text/css"> svg{ display: inli...
复制链接

扫一扫