当我们在构建一个 Web 应用或者网站时，经常需要使用到图像来丰富页面内容并提高用户体验。而其中一种类型的图像是 SVG（可缩放矢量图形），它可以通过自定义元素（Custom Elements）进行渲染，这为我们提供了更多的灵活性和控制性。
Custom Elements 简介
Custom Elements 是一项 Web API，在 Custom Elements 中，我们可以定义自己的 HTML 标签，这些标签继承自其他标签，并且在 JavaScript 中添加自定义的行为。这为我们提供了创造性和可扩展性的设计空间。
以渲染 SVG 图像为例，我们可以在 Custom Elements 中创建一个名为 svg-image 的元素，并提供自定义的属性和方法，这样就可以灵活地添加和操作 SVG 图像。
渲染 SVG 图像的步骤
- 创建 Custom Element
首先，我们需要创建 Custom Element，这个元素将承载 SVG 图像以及我们自定义的属性和方法。在这个例子中，我们将创建一个叫做 svg-image 的元素。
class SvgImage extends HTMLElement {
constructor() {
super();
}
}- 添加 SVG 图像
在 SvgImage 自定义元素中，我们需要为 SVG 图像创建一个标记结构，并将其附加到元素中。
-- -------------------- ---- -------
----- -------- ------- ----------- -
------------- -
--------
----- -------- - -----------------------------------
------------------ - -
-------
----- -
-------- ------
-
--- -
------ -----
------- -----
-
--------
---- ---------- - --- -----------
--
----- ---------- - ------------------- ----- ------ ---
---------------------------------------------------------
-
-在上面的代码中，我们使用了 Shadow DOM，这样可以将 SVG 图像隔离，避免与其他元素产生冲突。
- 添加属性和方法
接下来，我们可以添加自定义属性和方法来控制 SVG 图像的行为。以下代码为 SVG 图像添加了 path 属性，并在 SVG 上根据 path 的值绘制对象。
-- -------------------- ---- -------
----- -------- ------- ----------- -
------------- -
--------
----- -------- - -----------------------------------
------------------ - -
-------
----- -
-------- ------
-
--- -
------ -----
------- -----
-
--------
---- ---------- - --- -----------
--
---------------- - ------------------- ----- ------ ---
---------------------------------------------------------------
--------- - --------------------------------------
-
------ --- -------------------- -
------ ---------
-
------------------------------ --------- --------- -
------ ------ -
---- -------
-------------------------
------
-
-
--------------- -
----- ----------- - ------------------------------------------------------ --------
----------------------------- ------
-----------------------------------
-
-在代码中，我们使用了 observedAttributes 方法来告诉浏览器我们观察的属性。当元素的属性发生变化时，我们会调用 attributeChangedCallback 方法来更新 SVG 图像。在 _drawPath 方法中，我们使用了 createElementNS 方法来创建一个新的 path 元素，并设置其 d 属性来指定路径。
- 使用自定义元素
在定义好自定义元素后，我们就可以在 HTML 文件中使用它了。
<svg-image path="M10 10 L90 10 L90 90 L10 90 Z"></svg-image>
上面的 HTML 代码会渲染一个矩形的 SVG 图像。
总结
在 Custom Elements 中，我们可以创建自定义元素，并在元素中添加自定义的属性和方法。通过使用自定义元素，我们可以更加灵活地渲染 SVG 图像，并可以根据需求添加自定义的交互和行为。
完整示例代码如下：
-- -------------------- ---- -------
----- -------- ------- ----------- -
------------- -
--------
----- -------- - -----------------------------------
------------------ - -
-------
----- -
-------- ------
-
--- -
------ -----
------- -----
-
--------
---- ---------- - --- -----------
--
---------------- - ------------------- ----- ------ ---
---------------------------------------------------------------
--------- - --------------------------------------
-
------ --- -------------------- -
------ ---------
-
------------------------------ --------- --------- -
------ ------ -
---- -------
-------------------------
------
-
-
--------------- -
----- ----------- - ------------------------------------------------------ --------
----------------------------- ------
-----------------------------------
-
-
---------------------------------- ----------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a12ebe48841e9894d72fab