HTML5 内联 SVG
在 HTML4 中，要在网页上显示矢量图形，必须使用 元素来引入外部 SVG 文件。而在 HTML5 中，可以直接将 SVG 代码嵌入到 HTML 文件中，并且可以使用 CSS 和 JavaScript 来操作 SVG 图像。
什么是 SVG？
SVG（可缩放矢量图形）是用于描述二维矢量图形的一种开放标准。使用 SVG，我们可以创建各种复杂的矢量图形、图表、地图等等，而且可以无限缩放而不失真。
SVG 是由 XML 描述语言表示的，因此具有 XML 的所有特性，如可编辑、可搜索、可压缩等等。
在 HTML 中内联 SVG
在 HTML 文件中，可以使用 元素来嵌入 SVG 代码。下面是一个简单的例子：
<!DOCTYPE html> <html> <head> <title>Inline SVG Example</title> <style> svg { width: 200px; height: 200px; background-color: #f1f1f1; } </style> </head> <body> <h1>Inline SVG Example</h1> <svg viewBox="0 0 100 100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> </svg> </body> </html>
在这个例子中，我们创建了一个圆形 SVG 图像，并使用 CSS 来设置其宽度、高度和背景色。
在 CSS 中操作 SVG
由于 SVG 代码是 XML 格式的，因此可以使用 CSS 来对其进行样式控制。下面是一个简单的例子：
<!DOCTYPE html> <html> <head> <title>Inline SVG Example</title> <style> svg { width: 200px; height: 200px; background-color: #f1f1f1; } circle { stroke: black; stroke-width: 3; fill: red; } </style> </head> <body> <h1>Inline SVG Example</h1> <svg viewBox="0 0 100 100"> <circle cx="50" cy="50" r="40" /> </svg> </body> </html>
在这个例子中，我们使用 CSS 来设置圆形 SVG 图像的边框颜色、边框宽度和填充颜色。
在 JavaScript 中操作 SVG
SVG 也可以使用 JavaScript 来进行动态操作和交互。下面是一个简单的例子：
<!DOCTYPE html> <html> <head> <title>Inline SVG Example</title> <style> svg { width: 200px; height: 200px; background-color: #f1f1f1; } circle { stroke: black; stroke-width: 3; fill: red; transition: all 0.5s ease; } circle:hover { fill: green; } </style> </head> <body> <h1>Inline SVG Example</h1> <svg viewBox="0 0 100 100"> <circle cx="50" cy="50" r="40" /> </svg> <script> var circle = document.querySelector('circle'); circle.addEventListener('click', function() { this.setAttribute('r', '60'); }); </script> </body> </html>
在这个例子中，我们使用 JavaScript 来为圆形 SVG 图像添加了一个点击事件。当用户点击图像时，JS 将“半径”属性更改为 60。
总结
HTML5 提供了内联 SVG 的支持
