前端图形:SVG与Canvas( 二 ) _生活百科

cx、cy圆心的x、y坐标r圆的半径长度rx、ry椭圆的x、y半径<polyline/polygon>折线、多边形，两者数据结构相似，多边形是自动首尾连接封闭成一个区域（Polygon /?p?l?ɡ?n/多边形）pointsx、y坐标的集合，多个坐标逗号,分割points="0 0, 20 40, 70 80/>< path>路径，很常用、很强大的图形绘制，数据在属性d中< d>路径数据，< path>最重要的属性，由多组命令+ 坐标点组成d="M 50 5 H250 V195 H50 Z"M x y移动画笔到坐标点x、yM50 5L x y划线到坐标x、yL 250 0H x绘制水平线，到坐标x；小写h的坐标为相对位置H 250V y绘制垂直线，到坐标y；小写v的坐标为相对位置V195Z闭合路径（closepath），放到最后用于闭合路径C*绘制曲线，包括贝塞尔曲线、圆弧。<text>文本标签，支持CSS样式中的文本样式x、y文本开始位置font-size字体大小< textPath>文字绘制的路径，这个就比较有趣了<textPath xlink:href="https://www.huyubaike.com/biancheng/#path1">公共属性部分属性可以用CSS设置，支持hover伪类stroke笔画颜色(stroke /stro?k/ 笔画) ，包括线段、形状线条。stroke="red"stroke-width画笔线宽stroke-width="10"fill填充颜色，填充一个区域（矩形、圆形等）fill="#0001"

小提示：注意服务器添加对svg的支持，及gzip压缩。

<svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg">	<circle cx="150" cy="100" r="80" fill="green" />	<circle cx="150" cy="100" r="70" fill="#fff" />	<text x="150" y="125" font-size="60" text-anchor="middle" fill="orange">SVG</text>	<line x1="0" y1="100" x2="300" y2="100" stroke="white" stroke-width="8"/></svg><svg class="icon" height="200" viewBox="0 0 300 200" version="1.1">	<rect x="5" y="50" rx="50" ry="50" height="100" width="290" fill="white" stroke="blue" stroke-width="10"/>	<path d="M 50 5 H250 V195 H50 Z" stroke="red" stroke-width="10" fill="#00000001" />	<text x="145" y="125" font-size="60" text-anchor="middle" fill="#fab">Path</text></svg><style>	svg:hover{background-color: aliceblue;stroke: red;stroke-width: 1px;fill: red;	}</style>

文章插图
1.2、动画SVG 本身就是一个HTML元素，因此动画可以用CSS的动画来实现（参考 CSS动画），SVG中也有专门用于实现动画的<animate>子元素。这里示例采用JavaScript+transform变换实现旋转效果。

<svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg">	<circle cx="150" cy="100" r="80" fill="green" />	<circle cx="150" cy="100" r="70" fill="#fff" />	<text class="svgc" x="150" y="125" font-size="60" text-anchor="middle" fill="orange" >SVG</text>	<line class="svgc" x1="0" y1="100" x2="300" y2="100" stroke="white" stroke-width="8" /></svg><script>	let svgcs = document.querySelectorAll(".svgc");	//设置中心点	svgcs.forEach(element => {element.setAttribute("transform-origin", '150 100');	});	let deg = 0;	setInterval(() => {deg = deg > 360 ? 0 : deg+4;svgcs.forEach(element => {element.setAttribute("transform", `rotate(${deg})`);});	}, 100);</script><!-- 用CSS动画实现的版本 --><style>	.svgc {transform-origin: 150px 100px;animation: svgc-routate 2s linear 1s infinite;	}	@keyframes svgc-routate {from {transform: rotate(0deg);}to {transform: rotate(360deg);}	}</style>