Question

我必须将SVG图标从常规网站移动到ReactJS网站。必须对SVG进行一些修改以使其与JSX兼容，因此我删除了所有'：'并将其替换为具有JSL兼容性的camel case属性名称。唯一的问题是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>

这给了我以下错误：

模块构建失败：SyntaxError：意外的令牌（90:58）

这是有道理的，但在我的案例的d属性中有像M596.473,389.394c0这样的部分。可以想象，4和0之间的字母c会导致问题，因为字母不是整数。

如何在不使用库或其他内容的情况下使SVG正常工作？我只想将此SVG转换为有效的JSX。

Answer 1

将style={{fill="#B8CD43"}}更改为style={{fill: "#B8CD43"}}每个地方都可以。

不需要危险的SetInnerHTML。这是工作Demo

Answer 2

React对SVG不起作用。如果你的svg是静态的，我个人觉得这样做更容易：

<StackPanel>
    <ListView Margin="5" Style="{DynamicResource lvStyle}" Height="200" x:Name="Master"/>
    <ListView Margin="5" Style="{DynamicResource lvStyle_Detail}" Height="200" x:Name="Detail">
        <ListViewItem>
            <TextBlock Text="{Binding Path=SelectedItem.dateString, ElementName=Master}" />
        </ListViewItem>
    </ListView>
</StackPanel>

在字符串中，您可以将svg完全放在从文件/数据库中读取的内容中，而无需任何额外的转换。

然后在这样的渲染中使用它：

lvStyle_Detail

ReactJS中的SVG图标

2 个答案: