Javascript ReactJS中的SVG图标

我必须将SVG图标从常规网站移动到JS网站。为了使SVG与JSX兼容，必须对SVG进行一些修改，因此为了与JSX兼容，我删除了所有的“：”并将它们替换为驼峰大小写属性名称。唯一的问题是d属性

SVG现在看起来像：

<svg id="Logo" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 900 800" enable-background="new 0 0 1024 1024" xmlSpace="preserve">
    <g id="Layer_1"></g>
    <g id="Logo">
        <g>
            <g id="Fish">
                <g>
                    <path style={{fill:"#8DC046"}} d="M430.249,525.415c0,64.563-58.349,136.165-58.349,136.165l0.434,0.435l214.046-136.867L374.238,388.279
                        l-0.594,0.596C373.644,388.875,430.249,458.241,430.249,525.415z"></path>
                </g>
                <g>
                    <path style={{fill="#B8CD43"}} d="M586.381,525.147L374.238,388.279l-0.594,0.596c0,0,56.605,69.366,56.605,136.54L586.381,525.147z"></path>
                </g>
                <g>
                    <path style={{fill="#15AADB"}} d="M430.249,253.264c0,64.145-56.444,136.163-56.444,136.163l0.433,0.435l212.143-136.868L372.334,116.125
                        l-0.595,0.598C371.739,116.723,430.249,188.18,430.249,253.264z"></path>
                </g>
                <g>
                    <path style={{fill="#4AC5ED"}} d="M586.381,252.994L372.334,116.125l-0.595,0.598c0,0,58.51,71.457,58.51,136.541L586.381,252.994z"></path>
                </g>
                <g>
                    <path style={{fill="#F88F2D"}} d="M596.473,389.394c0,216.894-135.035,388.081-135.035,388.081l0.789,0.795L889.707,388.9L462.227-0.467
                        l-1.095,1.097C461.132,0.629,596.473,177.202,596.473,389.394z"></path>
                </g>
            </g>
        </g>
    </g>
</svg>

这给了我以下错误：

模块生成失败：语法错误：意外令牌（90:58）

这是有道理的，但在我的例子中，在d属性中有类似于

M596.473389.394c0的部分。可以想象，4和0之间的字母
c
会导致问题，因为字母不是整数

如何在不使用库或其他东西的情况下使这个SVG工作？我只想将这个SVG转换为有效的JSX。
将
style={{{fill=“{B8CD43”}}
更改为
style={{fill:{B8CD43”}
每个地方都可以使用

不需要危险的药物。这里是工作
改变
style={{{fill=“{B8CD43”}}
到
style={{fill:{B8CD43”}
每一个地方，它都会工作

不需要危险的药物。下面是正在工作的
React还不能很好地使用SVG。如果您的svg是静态的，我个人觉得这样做容易得多：

var img = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 252.5 148.7" xml:space="preserve">
<g>
    <polygon points="252.5,0 252.5,52.6"/>
</g>
</svg>`

var-img=`
`

在字符串中，您可以准确地将svg放在从文件/DB读取svg的方式中，而无需进行任何额外的转换

然后在渲染中使用它，如下所示：

<div dangerouslySetInnerHTML={{__html: img}}/>

React还不能很好地使用SVG。如果您的svg是静态的，我个人觉得这样做容易得多：

var img = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 252.5 148.7" xml:space="preserve">
<g>
    <polygon points="252.5,0 252.5,52.6"/>
</g>
</svg>`

var-img=`
`

在字符串中，您可以准确地将svg放在从文件/DB读取svg的方式中，而无需进行任何额外的转换

然后在渲染中使用它，如下所示：

<div dangerouslySetInnerHTML={{__html: img}}/>


Nice catch，它确实可以编译，但在编译后的HTML中甚至没有包含SVG标记。你的意思是说，在编译后的HTML中，你看不到SVG？是的，问题根本不在style属性中（尽管语法像你看到的那样错误）。这与问题无关。危险的是，HTML帮助解决了这个问题。谢谢如果你想保留规则：
enable background=“new 0 1024”
应该重命名为
enableBackground=“new 0 0 1024”
@erol\u smsr Ohh，酷。像你这样的人保持stackoverflow的质量。感谢您的升级投票和友好。很好的捕获，它确实可以编译，但在编译的HTML中甚至不包含SVG标记。您的意思是说，在编译的HTML中，您无法看到SVG？是的，问题根本不在style属性中（尽管语法如您所见是错误的）。这与问题无关。危险的是，HTML帮助解决了这个问题。谢谢如果你想保留规则：
enable background=“new 0 1024”
应该重命名为
enableBackground=“new 0 0 1024”
@erol\u smsr Ohh，酷。像你这样的人保持stackoverflow的质量。谢谢你的支持和友善。这很好。这可能不是最佳实践，但我只需要SVG来呈现一个简单的徽标，仅此而已。所以，这就足够了，谢谢。对危险的HTML要特别小心，以免引入XSS漏洞。@RobertLongson是的，绝对是。在React文档中有一段代码，允许您使用危险的LysetinerHTML，同时确保没有XSS问题，因此已经介绍过了。谢谢这很好。这可能不是最佳实践，但我只需要SVG来呈现一个简单的徽标，仅此而已。所以，这就足够了，谢谢。对危险的HTML要特别小心，以免引入XSS漏洞。@RobertLongson是的，绝对是。在React文档中有一段代码，允许您使用危险的LysetinerHTML，同时确保没有XSS问题，因此已经介绍过了。谢谢