HTML5 - SVG

HTML5 - SVG (可缩放矢量图形)

SVG (可缩放矢量图形) 是一种基于 XML 的标记语言，用于描述二维矢量图形。与基于像素的栅格图像格式（如 PNG、JPG、GIF）不同，SVG 图形是使用数学形状、路径和文本来定义的。这使得它们可以无限缩放而不会损失质量或出现像素化。

SVG 非常适合用于标志、图标、插图、数据可视化（图表）、交互式地图以及在任何尺寸下都要求清晰度的动画。

SVG 是 W3C 标准，在所有现代 Web 浏览器中都得到广泛支持。

在 HTML5 中嵌入 SVG

HTML5 允许您使用 <svg> 元素直接在您的 HTML 文档中嵌入 SVG 代码。这是在 Web 上使用 SVG 最常见和灵活的方式。

<!DOCTYPE html>
<html>
<head>
    <title>Inline SVG Example</title>
</head>
<body>
    <h1>My SVG Circle</h1>

    <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
        <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
    </svg>

</body>
</html>

关于 <svg> 元素的要点：

width 和 height：定义 SVG 视口（可见区域）的尺寸。
xmlns：XML 命名空间属性，通常是 http://www.w3.org/2000/svg。虽然在 HTML5 环境中通常是可选的，但为了兼容性，最好包含它。
在 <svg> 标签内部，您可以定义图形元素，如 <circle>、<rect>、<line>、<path>、<text> 等。

另外，您可以将 SVG 代码保存在 .svg 文件中，然后使用其他方法嵌入它：

<img> 标签： <img src="mygraphic.svg" alt="Description">（简单，但通过 CSS/JS 进行交互/样式设置受限）。
CSS background-image： background-image: url('mygraphic.svg');
<object> 标签： <object data="mygraphic.svg" type="image/svg+xml"></object>
<iframe> 标签： <iframe src="mygraphic.svg"></iframe>

内联 SVG (<svg>...</svg>) 通常提供最强大的功能，允许使用 CSS 和 JavaScript 进行直接操作。

基本 SVG 形状

SVG 提供预定义元素用于常见形状：

矩形（`<rect>`）

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="180" height="80"
        fill="blue" stroke="darkblue" stroke-width="5"
        rx="15" ry="15" />
  <!-- rx, ry 创建圆角 -->
</svg>

圆形（`<circle>`）

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="45" fill="orange" />
  <!-- cx, cy = 中心坐标；r = 半径 -->
</svg>

椭圆（`<ellipse>`）

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="100" cy="50" rx="90" ry="40" fill="purple" />
  <!-- rx = 水平半径；ry = 垂直半径 -->
</svg>

线段（`<line>`）

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <line x1="10" y1="10" x2="190" y2="90" stroke="green" stroke-width="4" />
  <!-- x1, y1 = 起点；x2, y2 = 终点 -->
</svg>

折线（`<polyline>`）

绘制一系列相连的直线。

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <polyline points="10,10 50,90 90,30 130,70 170,10"
            fill="none" stroke="brown" stroke-width="3" />
  <!-- points = x,y 坐标列表 -->
</svg>

多边形（`<polygon>`）

类似于折线，但会自动闭合形状，将最后一个点连接到第一个点。

<svg width="110" height="110" xmlns="http://www.w3.org/2000/svg">
  <polygon points="55,10 100,90 10,90" fill="lime" stroke="black" />
</svg>

`<path>` 元素

<path> 元素是最强大的 SVG 形状元素。它可以绘制直线、曲线（贝塞尔曲线、二次曲线）、弧线，并将它们组合起来创建复杂的形状。其几何形状由 d 属性定义，该属性包含一系列命令和坐标。

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <path d="M 10 10 L 90 10 L 50 90 Z" fill="yellow" stroke="black"/>
  <!-- M = 移动到, L = 画线到, Z = 闭合路径 -->
</svg>

掌握路径数据需要练习。常见命令包括 M（移动到）、L（画线到）、H（水平画线到）、V（垂直画线到）、C（三次贝塞尔曲线）、Q（二次贝塞尔曲线）、A（椭圆弧）和 Z（闭合路径）。大写命令使用绝对坐标，小写命令使用相对坐标。

SVG 样式设置

SVG 元素可以使用以下方式进行样式设置：

表现属性： 直接在 SVG 元素本身上设置 fill、stroke、stroke-width 等属性。
CSS： 使用内联 style 属性、内部样式表（<svg> 或 HTML 中的 <style> 标签）或外部 CSS 文件应用样式。这是复杂样式设置和可维护性的首选方法。
CSS 属性： 常见属性包括 fill（内部颜色）、stroke（轮廓颜色）、stroke-width、stroke-linecap、stroke-dasharray、opacity、transform 等。

使用 CSS 的示例

<!DOCTYPE html>
<html>
<head>
    <title>Styling SVG with CSS</title>
    <style>
        .my-circle {
            fill: lightcoral;
            stroke: darkred;
            stroke-width: 5px;
            transition: fill 0.3s ease;
        }
        .my-circle:hover {
            fill: crimson;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
        <circle class="my-circle" cx="50" cy="50" r="40" />
    </svg>
</body>
</html>

其他 SVG 功能

SVG 还包含许多其他强大的功能：

<text>：用于沿着直线或曲线路径渲染文本。
<tspan>：用于设置 <text> 元素内部分文本的样式。
<g>：用于将元素分组，允许对整个组应用变换和样式。
<defs> 和 <use>：定义可重用的图形对象（如符号或渐变），然后在其他地方实例化它们。
渐变（<linearGradient>、<radialGradient>）。
图案（<pattern>）。
裁剪和遮罩（<clipPath>、<mask>）。
滤镜（<filter>，用于模糊、阴影等效果）。
动画（<animate>、<animateTransform> 等，尽管现在通常更倾向于使用 CSS/JavaScript 动画）。

使用 JavaScript 进行交互

由于内联 SVG 元素是 DOM 的一部分，您可以像操作 HTML 元素一样使用 JavaScript 操作它们。您可以添加事件监听器（click、mouseover），改变属性，修改样式，以及动态创建或移除 SVG 元素，从而实现高度交互的图形。

如需全面学习，MDN Web Docs 是一个优秀的 SVG 资源：（https://developer.mozilla.org/en-US/docs/Web/SVG）

HTML5 - SVG

HTML5 - SVG (可缩放矢量图形)

在 HTML5 中嵌入 SVG

基本 SVG 形状

矩形（<rect>）

圆形（<circle>）

椭圆（<ellipse>）

线段（<line>）

折线（<polyline>）

多边形（<polygon>）

<path> 元素