React: SVG通过id或class动态添加CSS

文章/答案/技术大牛

发布

3回答

reactjs、svg

在React中，我有一个svg文件，比如mySVG.svg <svg width="50" height="50" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg"> <rect id="Unit1" class="class</em

浏览 91提问于2021-10-27得票数 0

回答已采纳

4回答

无法使用React从本地文件夹显示svg

javascript、reactjs、svg

React from 'react';import svgs from "../public/svgfolder/0.svg" return( <div>/public/sv文件夹/0.

浏览 3提问于2019-05-22得票数 3

回答已采纳

3回答

我正在尝试使用带有react的SVG，但我不能。结果我找不到为什么会出现这个错误： InvalidCharacterError Failed to execute 'createElement' on 'Document': The tag name provided ('<svgcodesandbox中的代码示例：https://codesandbox.io/s/svg-in-react-r3g6l?file

浏览 39提问于2020-06-20得票数 0

回答已采纳

1回答

单独安装Eva图标并保持动态颜色状态

css、angular、svg、icons、nebular

相反，我已经下载了svg并在app.component中注册了svg包，这是可行的：export class AppComponent implements OnInit { 'book-open-outline': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24

浏览 4提问于2020-08-12得票数 0

3回答

如何导入SVG图标

javascript、reactjs、svg、import

我想在应用程序中导入太多的SVG图标&每个图标都需要通过css定制颜色，这是最简单的导入方式吗？导入到<img/>标签将不支持通过css填充的颜色更改。/Arrow.svg"; import Circlearrowdownright from ".

浏览 4提问于2022-05-10得票数 0

回答已采纳

3回答

如何使用Selenium定位按钮元素？

selenium、selenium-webdriver、xpath

下面是HTML元素： <button data-component-id="nokia-react-components-iconbutton" tabindex="0" class="ActionComponentbiWRLS NSPAppBanner__HelpButton-sc-761pc0-3 dvtRqt" mode="dark" type="button" xpath="1"></b

浏览 16提问于2022-06-30得票数 -1

回答已采纳

1回答

将光标移动到React组件时，very显示非常大的背景。

javascript、reactjs、react-devtools

Chrome版87.0.4280.141 (正式制作) (x86_64)安装了用于Chrome浏览器的工具扩展。打开一个由React技术开发的网站(例如，可以用来尝试)打开Chrome菜单……如果当前页面加载了React组件，=> More tools => Developer Tools转到选项卡" component

浏览 2提问于2021-01-20得票数 1

2回答

ReactJS在render函数中传递不同的属性集

reactjs、svg、parameters、attributes、components

我有一个ReactJS组件： class OneComponent extends React.Component { constructor(props_) {id={this.prefix} width={this.width} height={this.width} xmlndes='http://www.w3.org/2000/svg' xmlnsXlink<svg id={this.prefix}

浏览 16提问于2020-08-16得票数 0

回答已采纳

4回答

在图像之间切换以避免“跳跃”行为

html、css、reactjs

我试图通过根据条件(真或假)切换自定义复选框图像来模仿复选框的行为。我得到了一个非常恼人的视觉bug，当我将状态设置为真实或虚假的条件时，图像依赖于它，并且框在切换之前会有一点闪烁，这是我的代码：import boxCheckedIcon/assets/SmallBoxChecked.svg'; import boxUncheckedIcon from '../.

浏览 0提问于2020-10-02得票数 4

2回答

如何在react中显示导入的svg图标？

reactjs、svg

我已经导入了一个组件上的所有SVG图标，我想将状态中的所有图标放到对象中，但是当我在地图上运行它时，它是字符串形式的。有人能告诉我如何在react中显示地图上的图标吗？/assets/artist.svg';import Idea from './assets/idea.svg'; im

浏览 2提问于2020-09-23得票数 0

1回答

AJAX删除先前定义的jquery并重新定义- Jquery不处理AJAX生成的内容。

php、jquery、ajax

我正在开发一个社交类型页面，该页面通过AJAX预置加载新的评论。例如：COMMENT HERE<a class="react" data-id="<?= _data_html + '<br clear="all" /><

浏览 0提问于2018-12-19得票数 1

2回答

一个页面上有多个SVG

javascript、svg

我的页面上有多个SVG(它们也可以使用加号或减号图像动态添加)。即：<img src="/svgs/mysvg.svg" id="svg2"> <img src="/svg

浏览 0提问于2016-02-05得票数 1

2回答

React native svg未正确呈现

react-native、react-native-svg

我们正在开发一个Vue/ReactNative项目，在Reactnative组件react-native-svg (12.1.0版)中出现了一个奇怪的现象，即SVG不能正确呈现。SVG本身是用Adobe创建的，并使用CSS样式。不是所有的CSS元素都被支持吗？我们从外部Uri动态使用SVG，而不是作为静态文件。<svg-css-uri :key="'image_'

浏览 33提问于2021-03-25得票数 0

回答已采纳

1回答

反应和CSS测量进度。SVG圆路径长度

html、css、reactjs、svg

还希望在react中使用相同的项，因此红色笔画的%值需要动态添加。想要根据所附的图像进行测量，请帮助。<svg id="paths"> style="fill: transparent;fill-opacity: 1; stroke-width: 8; s

浏览 1提问于2022-03-24得票数 0

3回答

如何使react-google Chart标签可点击

javascript、reactjs、react-google-charts

我正在使用react google-chart ，它工作得很好。我想要做的是添加单击事件到横轴的标签，并获得标签名称和做任何我想做的事情我所做的是这样的import { Chart } from "react-google-charts"; export default class manpowerGraph ext

浏览 1提问于2020-03-11得票数 6

3回答

剪辑路径在firefox [% values]中不起作用

html、css、svg、clip-path

我正尝试在mozilla中运行svg clip-path，但它不起作用。

浏览 0提问于2015-11-20得票数 10

2回答

使用D3实现ReactJS嵌入Svg图像

javascript、reactjs、d3.js、svg

我用的是react + webpack + d3。我正在使用D3构建一个动态的SVG图。我可以在react中添加图像SVG，如下所示： import file_1 from '../../icons/03_file_reg.svg'; <image src={file_1}... /> 这是可行的。但是我正在尝试找出如何使用D3来做到这一点 <svg id</em

浏览 30提问于2019-09-15得票数 0

回答已采纳

1回答

如何添加属性而不实际编辑react中的HTML元素

javascript、html、css、reactjs

我有一个下面的HTML组件创建在REACT，我不能直接编辑。但是我需要向它的一个HTML元素添加一个属性。我也不能使用jQuery --其他明智的方法--它很容易使用jquery。挑战：我需要向SVG元素添加属性。例如->数据-id=“1”。它可以用CSS或任何其他方式完成吗？<TablePresenter> <svg>this is a actually a sort button<&

浏览 0提问于2021-10-13得票数 1

2回答

SVG/CSS问题，嵌入或引用文件

javascript、jquery、html、css、svg

在阅读了几篇关于为什么要使用<img>或<object>标签来引用svg文件的堆栈文章后，我还没有找到一篇文章来回答我关于CSS和svg <path>标签的特定问题。如果将svg嵌入到js或html中，则可以管理所有悬停事件，例如，在CSS规则中。或 <img <em

浏览 0提问于2015-07-16得票数 0

2回答

在Angular2中使用SVG图标

angular

我一直想知道在Angular2中使用SVG图标的最佳实践是什么。我看到目前主要有两种方法:1.将SVG转换为字体。2.在组件中内联SVG XML。我们开始使用ICOMOON的字体方法，但我们的问题是我们有多色图标，然后我们应该只为这些图标创建组件(对于其他图标，我们在SPAN/DIV上使用CSS属性) 内联SVG方法的问题是代码有点乱(我的模板中有

浏览 0提问于2017-02-08得票数 4

点击加载更多