为什么React会让我的SVG形状颜色看起来很奇怪？
React是一个用于构建用户界面的JavaScript库，它通过组件化的方式来管理和渲染界面。在使用React开发前端应用时，如果SVG形状的颜色看起来很奇怪，可能是由于以下几个原因：
- CSS样式冲突：React中的组件通常会使用自己的CSS样式，而SVG形状也可以通过CSS来设置颜色。如果在React组件中同时使用了CSS样式和SVG形状的颜色设置，可能会导致样式冲突，从而使SVG形状的颜色显示异常。解决方法是检查CSS样式和SVG形状的颜色设置，确保它们不会相互冲突。
- React的虚拟DOM机制：React使用虚拟DOM来管理和更新界面，它会根据数据的变化来重新渲染组件。在SVG形状的颜色设置中，如果没有正确地处理React的虚拟DOM机制，可能会导致SVG形状的颜色无法正确更新。解决方法是确保在React组件中正确处理数据变化，并使用React提供的更新机制来更新SVG形状的颜色。
- SVG属性设置问题：SVG形状的颜色可以通过fill属性来设置，但在React中，使用JSX语法来创建SVG元素时，需要使用camelCase命名规则来设置属性。例如，将fill属性设置为红色，应该写为fill="red"，而不是fill="Red"。如果在设置SVG形状的颜色时没有正确使用camelCase命名规则，可能会导致颜色显示异常。解决方法是检查SVG元素的属性设置，确保使用了正确的命名规则。
总结起来，React会让SVG形状的颜色看起来很奇怪可能是由于CSS样式冲突、React的虚拟DOM机制问题或SVG属性设置问题所导致的。解决方法是检查和调整CSS样式和SVG属性设置，确保它们与React的机制兼容，并正确处理数据变化和更新机制。
相关·内容
我创建了一个新项目，安装了字体-太棒了：
"@fortawesome/angular-fontawesome": "^0.4.0",
"@fortawesome/fontawesome-svg-core": "^1.2.19",
"@fortawesome/free-brands-svg-icons": "^5.9.0",
进口FontAwesomeModule
imports: [
...,
FontAwesomeModule
],
并创建了一个简单的图标：
faFacebook
浏览 1提问于2019-06-30得票数 1
回答已采纳
我有以下自定义图标组件：
import React from 'react';
import PropTypes from 'prop-types';
const Icon = (props: any) => {
const styles = {
svg: {
display: 'inline-block',
verticalAlign: 'middle',
},
path: {
fill: props.color,
},
};
retur
浏览 0提问于2019-04-02得票数 3
回答已采纳
4回答
这是一个矩形的。我想使用，但是它不起作用，给了我一个空白。它发生在火狐和chrome中。
它有不同的名字吗？我不明白为什么我不能使用css文件。填充颜色起作用。
工作示例。
css：
rect {
fill:rgb(0, 0, 255);
/*doesnt work height:100;*/
}
html：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect width="100" height="100" style
浏览 6提问于2013-01-17得票数 10
回答已采纳
2回答
我在页面上的object标签中包含了一个SVG图像文件，如下所示：
<object type="image/svg+xml" data="linkto/image.svg">
<!-- fallback image in CSS -->
</object>
有问题的图像是世界地图，我想在鼠标悬停在group上时转换fill属性，在本例中，我按大陆对我的SVG进行了分组，因此南美洲看起来如下所示：
<g id="south_america">
<path fill="#FA
浏览 1提问于2013-11-16得票数 75
回答已采纳
2回答
我有一个SVG徽标，我需要动态改变颜色时，它滚动过去的一节。每个部分的高度和宽度都是100%的浏览器窗口。
它要么是黑色，要么是白色，这取决于背景颜色。一旦我掌握了要点，我很乐意设置它。
这是我正在进行的工作，我已经搜索了一些东西，但找不到我真正需要的东西。
我试过的代码-
var t = $(".dba").offset().top;
$(document).scroll(function(){
if($(this).scrollTop() >= t)
{
$('svg.digi-logo
浏览 1提问于2015-02-24得票数 1
我从React学到的一件事是，如果组件的道具没有改变，那么React就不会费心重新渲染组件。对于无状态组件也是这样吗？或者它们的行为更像是“愚蠢的”函数，并且每次都会被执行？
例如，如果我有：
import StatelessComponent from '../StatelessComponent';
export default class DocumentsTable extends React.Component {
state = {
something: 'foobar',
};
render() {
return (
浏览 1提问于2017-10-14得票数 51
回答已采纳
3回答
用CSS控制SVG颜色
、、、
我正在一个使用一些基本CSS和Sprite (通过webpack生成)的库中设置一些图标。
一些图标，我希望能够用多种颜色。我的设计看起来是：
mail.svg (为了简单起见，省略了svg的细节)
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 64 64" width="64" height="64"
浏览 1提问于2018-02-23得票数 0
回答已采纳
我在react中渲染一个画布组件，它返回一个<rect>元素的列表，我试图实现的是只改变被点击的<rect>的颜色，然而在我的代码中，每当我点击其中一个元素时，元素的完整列表被更新，我如何才能只更新被点击的<rect>元素呢？ 下面是我的代码： import { useState } from "react";
import styles from "./Canvas.module.css";
let data = [
{
id: "1",
x: "50",
y:
浏览 31提问于2021-09-18得票数 1
回答已采纳
我刚接触React，正在使用npm package Material UI图标()并在React组件中显示图标，如下所示：
正在导入：
import KeyboardArrowRightIcon from 'material-ui/svg-icons/hardware/keyboard-arrow-right';
和渲染：
readMoreLink={<a href={someUrl} >Read more <KeyboardArrowRightIcon /></a>}
然而，由于KeyboardArrowRightIcon是由npm包提供的
浏览 3提问于2018-06-15得票数 59
3回答
当状态发生变化时，响应组件的变化，但当属性值发生变化时，组件会发生变化。
var Hello = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
var name="foo";
React.render(<Hello name={name} />, document.body);
name="bar";
上面我想看看“Hello”的渲染。
浏览 0提问于2015-03-13得票数 2
回答已采纳
3回答
我会改变图标的颜色。
我进口了MdIconRegistry和DomSanitizer
import {MdIconRegistry} from '@angular/material';
import {DomSanitizer} from '@angular/platform-browser';
而不是将SVG添加到注册表中。
constructor ( mdIconRegistry: MdIconRegistry, sanitizer: DomSanitizer) {
mdIconRegistry
.addSvgIconInNames
浏览 6提问于2017-09-03得票数 0
回答已采纳
2回答
关于Virtual及其diff算法，我了解的是，当某个组件(或元素/它的子组件也发生更改)发生更改时，协调该特定组件和子组件是有效的，因为除此之外，其他DOM组件不会被更改。
然而，我已经知道的是，DOM操作耗时的部分是重新计算元素样式的时刻(比如CSS)。
如果在许多其他组件之间的组件更改，例如高度样式更改或卸载，通过这种更改，同级组件(以下)将受到影响，其中这些组件的样式应全部重新呈现(中继或重新绘制)。
那么，这不意味着反应的对象--仅通过虚拟DOM和diff算法操作更改的视图部分--将无法实现？
我是误会了，还是这很正常？
如果这是正常的(由于其他组件中间更改的组件，下面的其他组件也必
浏览 3提问于2018-12-08得票数 0
回答已采纳
6回答
我似乎不明白为什么Firefox使用默认的svg颜色而不是类的fill。
以下是查看FF检查器时的3个填充：
SVG正在通过
<svg class="icon">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#menu-bag"></use>
</svg>
它应该显示白色的. of link .icon填充(#fff)，但实际上它使用的是#002649的SVG填充；如果我将. of link .icon更改
浏览 6提问于2015-01-09得票数 16
回答已采纳
在jquery悬停函数之后，css悬停不起作用。
所以，我的html中有几个svg元素。在这些svg元素上，我有jquery，如果我悬停在底部的一个按钮中，所有svg元素都会激活颜色，使其变为黄色(#b8a85)。
同时，当我将这些svg元素悬停到svg元素本身时，我希望这些svg元素变为白色(这是我用css:悬浮编写的)。
在jquery悬停函数之后，css悬停将无法工作。
任何需要的帮助！
除此之外，我还在脚本中嵌入了pan缩放插件。它们有可能坠毁吗？
$(document).ready(function() {
$(".button").hover(
浏览 1提问于2019-04-07得票数 1
回答已采纳
2回答
SVG以错误的颜色显示
、、、、
我有一个，我在我的反应网页导入。问题是。
正如你在网页上看到的，有3个SVG。其中2种显示颜色错误。但第一种颜色是原色。尽管3 SVG是导入的，并且使用的方式完全相同.
在MyPage.jsx中，我导入它们
import Hanshake from '../images/handshake.svg';
import Logistics from '../images/logistics.svg';
import Designer from '../images/designer.svg';
然后像这样使用它：
<Col xs={24
浏览 2提问于2020-07-20得票数 3
回答已采纳
我试图渲染一个按钮在反应，改变文字和颜色时，你点击它。
我让它正常工作，但是每当我呈现应用程序时，index.html文件头上的标题和App.module.css文件中的文本都会出现在页面上(白色文本)。我一直在寻找解决办法，但似乎找不到解决办法。
Btn.js
import styles from './App.module.css';
const Btn = ({toggleIt, toggle}) => {
return(
<>
<button onClick={toggleIt} className={toggle ? s
浏览 1提问于2020-05-29得票数 0
首先，对不起，如果我的英语不完美，我学习:x
如果在呈现函数中编写“console.log(‘test’)”，所以我在控制台中看到两次"test“.
只是为了指定，当我为组件使用函数并在类中使用所有默认方法(构造函数、呈现、componentDidMount、.)时，没有这个问题。在创建或修改组件时运行两次(不是析构，componentWillUnmount只运行一次)。
问题不是来自我的代码，我试图创建一个新的应用程序(用创建-反应-应用程序)和更改函数的类，但结果是相同的(即使在另一台计算机)。
创建项目后唯一的更改文件(我只更改了第1行、第5行和第7行)：
import Reac
浏览 1提问于2020-04-12得票数 0
回答已采纳
我有一个字符串数组，我希望将其呈现为一个带有彩色文本的列表。用户可以使用按钮更改颜色。
为此，我构建了一个名为的组件，它接收一个数组，并呈现一个包含数组的值的列表和一个更改颜色的按钮：
import React, { Component } from "react";
const renderArray = arr => (arr.map(value => (
<li>
{value}
</li>
)))
class List extends Component {
constructor(props
浏览 0提问于2018-03-31得票数 0
我正在使用grunticon添加svg。
一切正常，但我正在努力用css设计svg的样式。
我只想改变svg的填充颜色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-sc
浏览 0提问于2016-02-17得票数 0
当我看到我的代码多次运行来渲染/更新一个UI时，我很害怕。我有一个组件，它接受一个新的props id用于API调用。当组件收到道具时。它不必要地运行了render，我使用componentDidUpdate来调用它第二次运行render的应用程序接口。这不是让你的程序变慢了吗？或者是我的react应用结构不正确，根本不了解react。
此外，我还有一个允许条件渲染的setState，所以当我切换setState以显示API结果时，它的render -当它接收id props render时-当我setState to loading render时
因此它3呈现为1个UI更改。
浏览 0提问于2019-04-01得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
