HTML5 SVG 学习笔记
接将SVG元素嵌入HTML页面中。SVG元素是SVG图形的容器。
示例：SVG圆形
HTML复制
<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>预览
-
cx和cy定义圆心的坐标。 -
r定义圆的半径。 -
stroke定义边框颜色。 -
stroke-width定义边框宽度。 -
fill定义填充颜色。
示例：SVG五角星
HTML复制
<!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>预览
-
points定义多边形的顶点坐标。 -
style定义图形的样式，包括填充颜色、边框颜色和边框宽度。
四、SVG与Canvas的区别
SVG和Canvas都是用于在网页上绘制图形的技术，但它们之间存在一些关键区别：
1. SVG
-
基于XML：SVG使用XML格式定义图形，每个元素都是可用的，可以附加JavaScript事件处理器。
-
矢量图形：SVG是矢量图形，不依赖分辨率，可以任意缩放而不失真。
-
事件处理器：SVG支持事件处理器，可以为图形元素添加交互功能。
-
适合复杂图形：SVG适合用于带有大型渲染区域的应用程序，如地图。
-
性能问题：SVG复杂度高会减慢渲染速度，不适合频繁重绘的场景。
2. Canvas
-
基于像素：Canvas通过JavaScript逐像素进行渲染，绘制完成后图形不会继续得到浏览器的关注。
-
依赖分辨率：Canvas依赖分辨率，放大后会失真。
-
不支持事件处理器：Canvas不支持事件处理器，需要手动处理交互逻辑。
-
适合图像密集型应用：Canvas适合用于图像密集型的游戏，其中的许多对象会被频繁重绘。
-
性能优势：Canvas在处理简单图形时性能较高，适合需要频繁重绘的场景。