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

元素/属性描述值/示例< svg>矢量图形元素viewBoxSVG 画布显示区域，这里 1 单位等同于 1 屏幕单位，SVG里的坐标、尺寸都是基于此画布区域viewBox="0 0 300 200"width、height宽度、高度width="300" height="200"xmlnsxml标签的命名空间，为了区分html、svg，可以省略< line>线段x1、y1起点x、y坐标<line x1="0" y1="100" />x2、y2终点x、y坐标x2="300" y2="100"< rect>矩形：<rect x="5" y="50" height="100" width="290"/>x、y起点坐标width、height矩形的宽、高rx、ryx、y方向的圆角半径。r=radius 半径rx="50" ry="50"<circle/ellipse>圆和椭圆：<circle cx="150" cy="100" r="80"/>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>