SVG基础一

最新推荐文章于 2024-08-28 22:04:04 发布

春风得意马蹄疾，一日看尽长安花。

最新推荐文章于 2024-08-28 22:04:04 发布

阅读量149

点赞数 1

分类专栏： js语法基础文章标签： javascript css 前端

本文链接：https://blog.csdn.net/w96098/article/details/115722681

版权

js语法基础专栏收录该内容

14 篇文章 0 订阅

订阅专栏

基本图形：圆形；
cirle  : 设计属性cx，cy圆中心坐标；r半径；fill填充色；stroke边框颜色；stroke-width边框宽度；
<svg xmlns="http://www.w3.org/2000/svg">
	<circle cx="40" cy="100" r="40" fill="green" stroke="black" stroke-width="20"></circle>
</svg>

效果如图

边框并不会撑大元素

矩形；rect;涉及属性：x,y左上角坐标；width，height宽度和高度；rx,ry弧度
<svg xmlns="http://www.w3.org/2000/svg">
	<rect x="50" y="100" width="100" height="100" fill="green" stroke="black" rx="10" ry='10'></rect>
</svg>

线：line；涉及属性：x1,y1起始坐标；x2,y2终点坐标；stroke(-width)线条颜色及宽度；
<svg xmlns="http://www.w3.org/2000/svg">
	<line x1="50" y1="100" x2="500" y2="500" stroke="black" stroke-width="5"></line>
</svg>

fill="transparent"背景色为透明

<body style="height: 100VH;">
	<!-- g标签;用来分组和组合元素;涉及属性transform=translate(100,100) g标签水平坐标可移动整个分组；--> 
	<!--text标签文字text-anchor="middle"居中；start，end居左居右;font-size="20" 字体大小；垂直居中方法已知目测调整~~~~-->
	<!-- image图片 属性xlink:href图片路径；image放到html中才会生效，坐标依据为左上角-->
	<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
		<g cursor="pointer" transform=translate(100,100)  stroke="black" stroke-width="5">
			<image x="-25" y="-25" height="50" xlink:href="qihoo.png"></image>
			<text y="2" font-size="20" text-anchor="middle">文字</text>
		</g>
	</svg>
</body>