SVG 是一种矢量图形格式，可以实现任何复杂的图形效果，同时还支持交互和动画。React 中使用 SVG 可以轻松地控制图形，实现更好的可维护性和可复用性。本文将介绍如何在 React 中使用 SVG。
SVG 的基本知识
SVG 是一种标准化的 XML 文档格式，它定义了一组指令，用于描述二维的可缩放矢量图形。它支持自定义样式、交互和动画，并且在不失真的情况下可以无限缩放。
SVG 图形由一些形状的几何图元和一些可用于变换和样式化的属性组成。常用的几何图元包括 <rect>、<circle>、<ellipse>、<line>、<polyline>、<polygon>、<path> 等。
React 中的 SVG
在 React 中使用 SVG 和其他 HTML 元素一样简单，可以使用 React.createElement() 函数来创建 SVG 元素。需要注意的是，SVG 元素有一些特殊的属性和样式，需要使用独特的样式指定方式。
例如，如果要创建一个矩形并应用红色填充和黑色边框，则可以使用以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
-------- ----------- -
------ -
---- ----------- -------------
----- ------ ------ ---------- ----------- ---------- -------------- --------------- --
------
--
-在 SVG 中，所有的图形都被放置在 <svg> 元素中。在上面的例子中，我们创建了一个宽度和高度分别为 100 像素的 SVG 元素，然后使用 <rect> 元素创建了一个矩形，矩形的位置、大小、填充和边框样式都使用相应的属性指定。
需要注意的是，SVG 元素和其他 HTML 元素有一些语法上的不同，例如：
- 使用
x和y属性来指定元素相对于 SVG 左上角的位置； - 使用
width和height属性来指定元素的大小； - 使用
stroke和strokeWidth属性来指定边框样式； - 使用
fill属性来指定元素的填充颜色； - 使用
transform属性来指定元素的变换。
使用 SVG 图标
在 React 中使用 SVG 可以很容易地使用 SVG 图标。SVG 图标通常具有独特的优势，如不失真的缩放、性能优化以及灵活的样式等。
在使用 SVG 图标时，我们通常要将 SVG 文件导入到 React 组件中，然后将其渲染为 <svg> 元素。例如，如果要使用一个名为 DeleteIcon.svg 的 SVG 图标，并应用红色填充和黑色边框，则可以使用以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------- ---- -------------------
-------- -------------- -
------ -
--------
---- ------------------ ---------- - -- ----
----- ---------- -------------- --------------- -------------- --
------
------
---------
--
-在上面的例子中，我们首先将 DeleteIcon.svg 文件导入到组件中，并将其渲染为 <path> 元素。然后，在 <svg> 元素中指定了 aria-hidden="true" 来隐藏图标的语义含义，设置 viewBox 属性来定义图标的坐标系，并将 <path> 元素的 d 属性设置为导入的 SVG 文件。
总结
使用 SVG 在 React 中绘制图形和使用 SVG 图标都非常简单，但需要注意一些语法上的差异和属性的特殊性。通过使用 SVG，我们可以轻松地实现更好的可维护性和可复用性，同时还具有不失真的缩放、交互和动画的优势。希望本文能为你在 React 中使用 SVG 提供一些指导帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a24b5f48841e9894ea28e7