有没有办法在react中动态构建svg？

文章/答案/技术大牛

发布

2回答

javascript、reactjs、svg

在我的web应用程序中，有一个汉堡制作部分。用户从汉堡开始，除了上面的圆面包和下面的圆面包什么都没有。用户可以从各种“配料”中选择添加到汉堡包中，然后显示变化。我有顶部圆面包，底部圆面包，生菜，馅饼，奶酪等的SVG文件，我希望在运行时将它们动态地组合(堆叠)在一起。我目前能够动态地堆叠它们，但我希望让某些SVG文件与其他文件重叠。react DOM看起来像这样 <img src = {topBunSVG}> </img>

浏览 23提问于2021-01-06得票数 0

回答已采纳

1回答

如何在react中动态渲染图像？

reactjs、typescript

如何在react / typescript中动态渲染/导入图像？以下是我想要实现的目标。 MEDIAS.map((media) => (<img

浏览 3提问于2021-04-19得票数 1

1回答

动态导入SVG

reactjs、svg

我试图在我的React组件中动态导入SVG但是，当我构建(npm运行构建)时，

浏览 3提问于2021-03-04得票数 4

回答已采纳

1回答

React.createElement从字符串呈现svg

reactjs、svg

我在字符串变量中有一个svg。我从API调用中获得此字符串，因此此信息是动态显示的。我想通过React.createElement在浏览器上动态呈现这个字符串。我该怎么做呢？一种方法是将svg字符串解析为元素，然后递归地为svg中的每个元素调用React.createElement(...)，但是编写SVG解析器似乎并不是最优的。有没有更干净的方法？谢谢

浏览 46提问于2021-05-11得票数 0

1回答

使动态SVG可滚动

javascript、svg、react-native

在我的react原生应用中，有一个视图，它显示了一个进度图。此图是在SVG ( react-native-svg npm )及其线、圆和矩形等功能的帮助下动态构建的。let svgHeight = height;} <View> <Svgheight={height *

浏览 0提问于2016-10-06得票数 0

1回答

nodejs中的动态需求& react

node.js、reactjs

我正在尝试从动态导入一个图标并抛出这个错误：import React from 'react'; const Button = ({ icon = 'hom

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

回答已采纳

2回答

使用弹出的创建-react app创建SVG Sprite组件

javascript、reactjs、svg、webpack、create-react-app

我正在使用create-react-app ，并创建了一个在开发中工作良好的SVG组件。我的问题是，当构建要发布的应用程序时，构建过程不会识别组件的动态路径，因此不会将主sprite文件放入我的/media文件夹中。示例SVG组件： return ( <svg className={`icon ${this.props.id}`} fill={this.p

浏览 1提问于2016-09-27得票数 1

回答已采纳

2回答

错误阳性打字本找不到模块警告

javascript、typescript、webpack、tslint、svg-react-loader

svg-react-loader?name=Icon!../images/svg/item-thumbnail.svg" ts找不到模块'!svg-react-loader?/images/svg/item-thumbnail.svg'.即使我应用了tslint

浏览 7提问于2018-08-07得票数 1

1回答

可以配置为尊重CSS中的资产URL吗？

reactjs、react-router、assets、react-router-dom

我正在使用来自react-router-dom的react-router-dom。我想在一个不是/的路径上托管我的应用程序。我在路由器标记上使用了basename属性，它工作得很好。但是在我的CSS文件中，这会破坏：我尝试过这样做，但它破坏了prod构建(dev env )：这是可行的，但只适用于生产

浏览 3提问于2019-03-25得票数 0

回答已采纳

2回答

如何在没有babel的情况下动态创建“编译的”React组件？

javascript、reactjs、react-native

如果我有一个嵌套的节点对象，就像这样(忽略语法)： node: { attrs: { height: "40", width: "children: nullm } } ]}; 有没有可能在我的React Native应用程序的JS中动态地动态</e

浏览 0提问于2017-11-04得票数 1

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来做到这一点 <s

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

回答已采纳

2回答

未正确绘制Dagre-D3的React组件

d3.js、reactjs、dagre

我将此演示转换为React组件。代码如下。import React from 'react'import dagreD3 from 'dagre-d3' var svgGroup = d3.select(R

浏览 5提问于2015-08-30得票数 5

2回答

React SVG在组件重新渲染时消失

javascript、reactjs、dom、svg

我正在制作一个react应用程序，在我的组件中有一些SVG图标。例如，我有一个SearchBar组件，它包含input元素和一个带有搜索图标的按钮。通过从一个sprite文件中相应地设置xlinkHref属性，我对所有的SVG图标都使用了inline SVG。消失后：看到我可爱的SVG图标突然消失真让人心碎…… 敬请指教！-EDIT-以下是我用来

浏览 3提问于2018-06-09得票数 13

2回答

在更改活动选项卡时卸载Bootstrap选项卡中的SVG对象

html、twitter-bootstrap、svg

我在引导选项卡中显示了一些SVG对象。<object type="image/svg+xml" Your browser does not support SVGs </objec

浏览 0提问于2018-01-21得票数 0

回答已采纳

6回答

如何动态导入SVG并将其内联呈现

javascript、reactjs、webpack、webpack-4

我有一个函数，它接受一些参数并呈现SVG。我希望根据传递给函数的名称动态导入该svg。看起来是这样的： return <Icon width={size} height={size} fill=

浏览 9提问于2020-04-21得票数 25

回答已采纳

2回答

如何在FLEX中显示SVG

apache-flex、actionscript-3

有没有办法在FLEX中显示动态加载的SVG？

浏览 3提问于2011-03-22得票数 5

回答已采纳

1回答

如何制作没有viewbox属性的SVG缩放？

javascript、html、css、reactjs、svg

该组件返回一个具有多个子级的元素。react组件的API只允许我设置svg元素的CSS样式。我没有办法给svg元素一个viewbox属性。有没有办法让SVG只通过CSS缩放来填充它的父容器？供参考的react组件：

浏览 1提问于2018-03-27得票数 2

2回答

链接SVG库时出现React本机问题

react-native、svg、jsx

所以我需要链接react-native-svg 我采取的步骤是： $ npm i --save react-native-svg$ npm install -g react-native-cli$ react

浏览 24提问于2020-12-29得票数 0

回答已采纳

1回答

在一个舞台上绘制多个SVG并导出到单个SVG* (React)*

konvajs

我正在使用react-konva包，希望在一个具有多层的舞台上绘制多个SVG文件，并将它们全部导出到一个SVG文件中。我只能找到"Path“组件，它不接受我的SVG文件。我怎么才能修复它呢？有没有办法将整个阶段导出到一个SVG文件中？

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

1回答

在SVG中创建一个带有文本的“蒙版”

svg、svg-filters

我目前正在尝试在svg中制作一个如下所示的评论图标，但将文本周围的空间作为演讲气泡的一个缺口(而不是底部的图标)。谢谢 

浏览 4提问于2017-12-07得票数 0

回答已采纳

点击加载更多