Chromium HTML5 ＜svg＞对应c++接口说明

2024-10-22 11:04:32

一、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 属性参考

了解每一种 SVG 属性的细节。

SVG DOM 接口参考

了解有关 SVG DOM API 的全部细节。

SVG：可缩放矢量图形 | MDN (mozilla.org)

前端测试用例：

<!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 文件里面定义了所有对象元素：

{
  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

// 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

// 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

码农公寓