钟文志的架构师之路

Appearance

HTML5 的 SVG (Scalable Vector Graphics) 是一种基于 XML 的矢量图形格式。SVG 可以在网页上绘制各种形状、路径和文本，并且能够随设备分辨率缩放而不失真。与 <canvas> 不同，SVG 是一种声明式语言，可以在 HTML 文档中直接编写并通过 CSS 和 JavaScript 进行样式和交互控制。

基本用法 ​

SVG 图形可以直接嵌入到 HTML 文档中：

html
<svg width="300" height="200">
    <rect x="50" y="20" width="150" height="100" fill="blue" />
    <circle cx="150" cy="120" r="50" fill="green" />
    <text x="150" y="180" font-family="Arial" font-size="20" text-anchor="middle" fill="black">
        SVG 示例
    </text>
</svg>

常见元素 ​

  • <rect>：绘制矩形。
html
<rect x="10" y="10" width="100" height="50" fill="blue" />
  • <circle>：绘制圆形。
html
<circle cx="50" cy="50" r="40" fill="green" />
  • <ellipse>：绘制椭圆。
html
<ellipse cx="100" cy="50" rx="50" ry="30" fill="purple" />
  • <line>：绘制直线。
html
<line x1="0" y1="0" x2="200" y2="200" stroke="black" stroke-width="2" />
  • <polyline>：绘制折线。
html
<polyline points="0,40 40,40 40,80 80,80 80,120" fill="none" stroke="red" stroke-width="2" />
  • <polygon>：绘制多边形。
html
<polygon points="200,10 250,190 160,210" fill="lime" stroke="purple" stroke-width="1" />
  • <path>：绘制复杂路径。
html
<path d="M10 10 H 90 V 90 H 10 L 10 10" stroke="black" fill="transparent" />
  • <text>：绘制文本。
html
<text x="50" y="50" font-family="Verdana" font-size="20" fill="blue">Hello, SVG!</text>

样式与动画 ​

SVG 支持 CSS 样式和动画，可以通过 style 属性或外部 CSS 文件进行控制：

html
<svg width="300" height="200">
    <style>
        .myRect {
            fill: red;
            stroke: black;
            stroke-width: 2;
        }
    </style>
    <rect x="50" y="20" width="150" height="100" class="myRect" />
</svg>

SVG 动画可以使用 SMIL（Synchronized Multimedia Integration Language）：

html
<svg width="300" height="200">
    <circle cx="50" cy="50" r="40" fill="green">
        <animate attributeName="cx" from="50" to="250" dur="5s" repeatCount="indefinite" />
    </circle>
</svg>

与 JavaScript 交互 ​

SVG 可以通过 JavaScript 进行动态操作：

html
<svg id="mySvg" width="300" height="200">
    <rect id="myRect" x="50" y="20" width="150" height="100" fill="blue" />
</svg>

<script>
    document.getElementById("myRect").addEventListener("click", function() {
        this.setAttribute("fill", "red");
    });
</script>

总结 ​

SVG 提供了一种强大且灵活的方法来绘制矢量图形，适用于图标、图表、动画等场景。SVG 图形具有良好的缩放性和可编辑性，可以通过 CSS 和 JavaScript 进行丰富的样式和交互控制。掌握 SVG 的使用可以显著提升网页的视觉表现力和用户体验。