迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > React >

在 React 中更改 SVG 的颜色

作者:迹忆客 最近更新:2022/09/19 浏览次数:

在 React 中更改 SVG 的颜色:

  1. 不要在 SVG 上设置 fillstroke 属性。
  2. 将 SVG 作为组件导入。
  3. 在组件上设置填充和描边道具,例如 <MyLogo fill="black" stroke="yellow" />
import {ReactComponent as MyLogo} from './my-logo.svg';

export default function App() {
  return (
    <div>
      <MyLogo fill="black" stroke="yellow" />
    </div>
  );
}

下面是 svg 的示例。

<svg width="400" height="400">
  <circle cx="100" cy="100" r="50" stroke-width="5" />
</svg>

React svg图形示例

请注意,我们没有在 svg 元素上设置 fillstroke 属性。

如果尚未在 svg 中定义 fillstroke ,则仅在通过组件属性设置时才会应用它们。

fill 属性设置对象内部的颜色,而 **stroke** 属性设置对象周围线条的颜色。

或者,我们可以将 SVG 粘贴到组件中并将颜色作为属性

function MyLogo({fill, stroke}) {
  // 👇️ 将 SVG 粘贴到组件中
  // 将 fill 和 stroke 颜色作为属性
  return (
    <svg fill={fill} stroke={stroke} width="400" height="400">
      <circle cx="100" cy="100" r="50" stroke-width="5" />
    </svg>
  );
}

export default function App() {
  return (
    <div>
      <MyLogo fill="black" stroke="yellow" />
    </div>
  );
}

上面的代码示例实现了相同的结果,但我们将 SVG 直接存储在组件中,而不是从具有 svg 扩展名的文件中导入它。

注意MyLogo 组件将 fillstroke 值作为属性并将它们应用到 svg 元素。

如果我们没有可以将 SVG 作为组件导入的加载器,这应该是我们的首选方法。

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

Node.js 与 React JS 的比较

发布时间:2023/03/27 浏览次数:137 分类:Node.js

本文比较和对比了两种编程语言,Node.js 和 React。React 和 Node.js 都是开源 JavaScript 库的示例。 这些库用于构建用户界面和服务器端应用程序。

在 React 中循环遍历对象数组

发布时间:2023/03/18 浏览次数:124 分类:React

在 React 中循环对象数组: 使用 map() 方法迭代数组。 我们传递给 map() 的函数会为数组中的每个元素调用。 该方法返回一个新数组,其中包含传入函数的结果。 export default function App (

获取 React 中元素的类名

发布时间:2023/03/18 浏览次数:162 分类:React

在 React 中使用 event.target 获取元素的类名 获取元素的类名: 将元素上的 onClick 属性设置为事件处理函数。 访问元素的类名作为 event.currentTarget.className 。 export default function App () { cons

如何将 key 属性添加到 React 片段

发布时间:2023/03/18 浏览次数:152 分类:React

使用更详细的片段语法将 key 属性添加到 React 片段,例如 React.Fragment key={key} 。 更冗长的语法实现了相同的结果对元素列表进行分组,而不向 DOM 添加额外的节点。 import React from react

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便