svg标签画图

标签，描述图形的标签会放置于标签之中

属性：

• width：描述其在HTML文档中占据的宽度，
• height：描述其在HTML文档中占据的高度，
• viewBox：描述svg图像在HTML文档中的展示的一部分图片内容有四个值，分别是展示图片的左上角坐标的x,y和展示的图片的宽度和高度

子标签：

• ：用于绘画圆形

  标签的cx、cy、r属性分别为横坐标、纵坐标和半径，单位为像素。坐标都是相对于画布的左上角原点。   

    注意:   svg有自己专属的css属性来渲染绘画出来的图形

1. fill：填充里面
2. stroke：描边边框
3. stroke-width：边框宽度

• ：用于绘画直线

     标签的x1属性和y1属性，表示线段起点的横坐标和纵坐标；x2属性和y2属性，表示线段终点的横坐标和纵坐标；

• 标签用于绘制一根折线

  points属性指定了每个端点的坐标，横坐标与纵坐标之间与逗号分隔，点与点之间用空格分隔。  可以有多个坐标将坐标相连生成折线

• 标签用于绘制矩形

  的x属性和y属性，指定了矩形左上角端点的横坐标和纵坐标；width属性和height属性指定了矩形的宽度和高度（单位像素）。

• 标签用于绘制椭圆。

   的cx属性和cy属性，指定了椭圆中心的横坐标和纵坐标（单位像素）；rx属性和ry属性，指定了椭圆横向轴和纵向轴的半径（单位像素）。

• 标签用于绘制多边形。和一样拥有多个坐标但是不同的是其形成的是闭合的图形所以形成多边型

  的points属性指定了每个端点的坐标，横坐标与纵坐标之间与逗号分隔，点与点之间用空格分隔。

• 标签用于插入图片文件。

  的xlink:href属性表示图像的来源。

以上为我简单整理的基本的用法如果想看实例的话请点击这个链接：

Canvas

• 依赖分辨率
• 不支持事件处理器
• 弱的文本渲染能力
• 能够以 .png 或 .jpg 格式保存结果图像
• 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG

• 不依赖分辨率
• 支持事件处理器
• 最适合带有大型渲染区域的应用程序（比如谷歌地图）
• 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
• 不适合游戏应用

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！