一、SVG：可缩放矢量图形
开始学习 SVG
可缩放矢量图形 （Scalable Vector Graphics，SVG ）基于 XML 标记语言，用于描述二维的矢量图形。
作为一个基于文本的开放网络标准，SVG 能够优雅而简洁地渲染不同大小的图形，并和 CSS、DOM、JavaScript 和 SMIL 等其他网络标准无缝衔接。本质上，SVG 相对于图像，就好比 HTML 相对于文本。
SVG 图像及其相关行为被定义于 XML 文本文件之中，这意味着可以对它们进行搜索、索引、编写脚本以及压缩。此外，这也意味着可以使用任何文本编辑器和绘图软件来创建和编辑它们。
和传统的点阵图像模式（如 JPEG 和 PNG）不同的是，SVG 格式提供的是矢量图，这意味着它的图像能够被无限放大而不失真或降低质量，并且可以方便地修改内容，无需图形编辑器。通过使用合适的库进行配合，SVG 文件甚至可以随时进行本地化。
SVG 是由万维网联盟（W3C）自 1999 年开始开发的开放标准。
其他内容请查阅 SVG 教程。
文档
了解每一种 SVG 元素的细节。
了解每一种 SVG 属性的细节。
了解有关 SVG DOM API 的全部细节。
SVG：可缩放矢量图形 | MDN (mozilla.org)
前端测试用例：
html
<!DOCTYPE html>
<html>
<body>
<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" />
<line x1="0" y1="80" x2="100" y2="20" stroke="black" />
</svg>
</body>
</html>二、<svg>对应c++接口定义：
1、<svg>对应svg_tag_names.json5
third_party\blink\renderer\core\svg\svg_tag_names.json5 文件里面定义了所有对象元素：
cpp
{
metadata: {
namespace: "SVG",
namespaceURI: "http://www.w3.org/2000/svg",
fallbackInterfaceName: "SVGUnknownElement",
fallbackJSInterfaceName: "SVGElement",
export: "CORE_EXPORT",
},
data: [
"a",
{
name: "animate",
noTypeHelpers: true,
},
{
name: "animateColor",
JSInterfaceName: "SVGElement",
interfaceName: "SVGUnknownElement",
noConstructor: true,
},
"animateMotion",
"animateTransform",
"set",
"circle",
"clipPath",
"defs",
"desc",
"ellipse",
"feBlend",
"feColorMatrix",
"feComponentTransfer",
"feComposite",
"feConvolveMatrix",
"feDiffuseLighting",
"feDisplacementMap",
"feDistantLight",
"feDropShadow",
"feFlood",
"feFuncA",
"feFuncB",
"feFuncG",
"feFuncR",
"feGaussianBlur",
"feImage",
"feMerge",
"feMergeNode",
"feMorphology",
"feOffset",
"fePointLight",
"feSpecularLighting",
"feSpotLight",
"feTile",
"feTurbulence",
"filter",
"foreignObject",
"g",
"image",
"line",
"linearGradient",
"marker",
"mask",
"metadata",
{
name: "mpath",
interfaceName: "SVGMPathElement",
},
"path",
"pattern",
"polygon",
"polyline",
"radialGradient",
"rect",
{
name: "script",
constructorNeedsCreateElementFlags: true,
},
"stop",
{
name: "style",
constructorNeedsCreateElementFlags: true,
},
{
name: "svg",
interfaceName: "SVGSVGElement",
},
"switch",
"symbol",
"text",
"textPath",
"title",
{
name: "tspan",
interfaceName: "SVGTSpanElement",
},
"use",
"view",
],
}2、元素对应都在以下两个文件下 包含"svg"关键字的。
src\third_party\blink\renderer\core\svg
src\out\Debug\gen\third_party\blink\renderer\bindings\core\v8
三、本文以<line>和<circle>为例：
1、<line>接口定义：
third_party\blink\renderer\core\svg\svg_line_element.idl
cpp
// https://svgwg.org/svg2-draft/shapes.html#InterfaceSVGLineElement
[Exposed=Window]
interface SVGLineElement : SVGGeometryElement {
[MeasureAs=SVG1DOMShape] readonly attribute SVGAnimatedLength x1;
[MeasureAs=SVG1DOMShape] readonly attribute SVGAnimatedLength y1;
[MeasureAs=SVG1DOMShape] readonly attribute SVGAnimatedLength x2;
[MeasureAs=SVG1DOMShape] readonly attribute SVGAnimatedLength y2;
};third_party\blink\renderer\core\svg\svg_line_element.h
third_party\blink\renderer\core\svg\svg_line_element.cc
out\Debug\gen\third_party\blink\renderer\bindings\core\v8\v8_svg_line_element.h
out\Debug\gen\third_party\blink\renderer\bindings\core\v8\v8_svg_line_element.cc
2、<circle>接口定义：
third_party\blink\renderer\core\svg\svg_circle_element.idl
cpp
// https://svgwg.org/svg2-draft/shapes.html#InterfaceSVGCircleElement
[Exposed=Window]
interface SVGCircleElement : SVGGeometryElement {
[MeasureAs=SVG1DOMShape] readonly attribute SVGAnimatedLength cx;
[MeasureAs=SVG1DOMShape] readonly attribute SVGAnimatedLength cy;
[MeasureAs=SVG1DOMShape] readonly attribute SVGAnimatedLength r;
};third_party\blink\renderer\core\svg\svg_circle_element.h
third_party\blink\renderer\core\svg\svg_circle_element.cc
out\Debug\gen\third_party\blink\renderer\bindings\core\v8\v8_svg_circle_element.h
out\Debug\gen\third_party\blink\renderer\bindings\core\v8\v8_svg_circle_element.cc