将 React 与 SVG 结合使用
介绍
可缩放矢量图形 (SVG) 是一种类似于 XML 的语法，用于在浏览器中显示矢量图形或图像。SVG 生成的矢量图形可以缩放到最大，而不会被栅格化或降低质量。最有趣的是，所有主流浏览器都支持 SVG。在本指南中，您将学习如何使用 SVG 绘制图形（特别是万事达卡徽标）和形状，以及如何将 SVG 图形添加到您的 React 应用程序中。
理解 SVG 语法
如果您熟悉 HTML 或 XML，那么使用 SVG 的语法应该很容易掌握。编写 SVG 元素需要遵循两个严格的准则：
- 所有属性都必须放在引号中，无论值的类型如何（字符串或整数），如下所示
<rect width="100%" fill="purple" ...../>
- SVG 元素和属性都区分大小写，因此，更改元素或属性的大小写是无效的 SVG。
// Drawing a rectangle
<rect width="100%" fill="purple" ...../>
// NOT
<RECT WIDTH="100%" FILL="ORANGE"../>
绘制形状
如上所述，您将学习如何使用 SVG 绘制万事达卡徽标。每个 SVG 元素都包裹在一个<svg/>标签中，该标签带有版本和绘图区域的大小。
<svg version="1.1" baseProfile="full"
width="400" height="250"
xlmns="http://www/w3/org/2000/svg">
// Content Here
</svg>
接下来，添加一个带有黑色背景的矩形。
<svg version="1.1" baseProfile="full"
width="400" height="250"
xlmns="http://www/w3/org/2000/svg">
<rect width="100%" height="100%" fill="black"></rect>
</svg>
添加两个相交的圆。
<svg version="1.1" baseProfile="full"
width="400" height="250"
xlmns="http://www/w3/org/2000/svg">
<circle cx="150" cy="100" r="80" fill="red"></circle>
<circle cx="256" cy="100" r="80" fill="orange"></circle>
</svg>
r属性指的是圆的半径。
cx和cy指的是元素在圆的x和y坐标上的位置。
最后，在您的徽标上添加一些文字。
<svg version="1.1" baseProfile="full"
width="400" height="250"
xlmns="http://www/w3/org/2000/svg">
<circle cx="150" cy="100" r="80" fill="red"></circle>
<circle cx="256" cy="100" r="80" fill="orange"></circle>
<text x="200" y="219" font-size="20" text-anchor="middle" fill="white">MasterCard</text>
</svg>
要查看其外观，请创建一个 HTML 文件并在浏览器中打开它。你真是个天才！尝试进一步调整属性，以更好地了解它们的作用。
设置和应用程序
现在您拥有了世界一流的 SVG 徽标，请在终端中输入以下内容来设置您的 React 应用程序。
npx create-react-app <YOUR_APP_NAME>
您还可以访问https://react.new以在codesandbox.io上获取完全配置的 React 环境。
将 SVG 添加到应用程序
使用 Create React App 渲染 SVG 元素非常简单。为此，请创建一个包含您创建的徽标的 SVG 文件并保存它。在本指南中，我假设您将其保存在svg/ 中。
接下来，将其导入到您的应用程序中，如下所示。
import React from 'react';
import { ReactComponent as MyLogo } from './assets/logo.svg';
function App(){
return(
<div>
<MyLogo/>
</div>
);
}
结论
瞧！在本指南中，您学习了如何创建 SVG 元素并将其添加到 React 应用。SVG 的作用远不止创建基本形状。您可以做更多事情，包括渐变和动画。
Mozilla 开发者网络文档对可缩放矢量图形有非常详细的解释。您也可以通过 Twitter 与我联系@DesmondNyamador。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
扫一扫，分享到微信
