5.SVG

最新推荐文章于 2024-07-11 15:29:37 发布

黑糖22

最新推荐文章于 2024-07-11 15:29:37 发布

阅读量265

点赞数

分类专栏： HTML5 文章标签：前端

本文链接：https://blog.csdn.net/qq_43966202/article/details/128636511

版权

HTML5 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

1.什么是SVG

1.SVG 指可伸缩矢量图形 (Scalable Vector Graphics)。
2.SVG 有多种绘制路径、框、圆、文本和图形图像的方法。
3.SVG 用于定义用于网络的基于矢量的图形。
4.SVG 使用 XML 格式定义图形。
5.SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失。
6.SVG 是万维网联盟的标准。
7.HTML5 支持内联 SVG。

2.SVG优势

（对比JPEG和GIF）
1.SVG 图像可通过文本编辑器来创建和修改。
2.SVG 图像可被搜索、索引、脚本化或压缩。
3.SVG 是可伸缩的。
4.SVG 图像可在任何的分辨率下被高质量地打印.
5.SVG 可在图像质量不下降的情况下被放大。

3.将SVG直接嵌入HTML页面

1.SVG圆形

<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" />
</svg>

2.SVG五角星

<!DOCTYPE html>
<html>
<body>
 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
 
</body>
</html>

①<polygon>标签是 SVG 多边形标签。<polygon> 标签用来创建含有不少于三个边的图形。
②多边形是由直线组成，其形状是"封闭"的（所有的线条连接起来）。
③Remarkpolygon 来自希腊。 “Poly” 意味 “many” ， “gon” 意味 “angle”。
④points属性表示多个定点的坐标（空格隔开）。
⑤fill-rule的填充规则：
i：nonzero—这个规则通过从 canvas 上的某个点往任一方向绘制射线到无穷远，然后检查图形的线段和射线相交的点，来确定“内部区域”。从0开始计数，每次路径线段是从左到右穿过射线就加一，从右到左的就减一。通过计算交叉点，如果结果是0，则这个点在路径外边，不然，就是在里边。
ii：evenodd—这个规则通过从canvas上某个点往任一方向绘制射线到无穷远，然后计算给定图形上线段路径和该射线交叉点的数量。如果这个数是奇数，那么该点在图形内部；如果是偶数，该点在图形外部。

SVG和Canvas的区别

1.SVG 是一种使用 XML 描述 2D 图形的语言。Canvas 通过 JavaScript 来绘制 2D 图形。
2.SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
3.
Canvas：
①依赖分辨率。
②不支持事件处理器。
③弱的文本渲染能力。
④能够以 .png 或 .jpg 格式保存结果图像。
⑤最适合图像密集型的游戏，其中的许多对象会被频繁重绘。
SVG：
①不依赖分辨率。
②支持事件处理器。
③最适合带有大型渲染区域的应用程序（比如谷歌地图）。
④复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）。
⑤不适合游戏应用。