Question

我正在尝试将SVG转换为反应组件，因此我可以将其用于多个位置。

这是来源

<svg height="1000px" width="1000px" class="logo-triangle">
    <defs>
        <linearGradient id="grad1" x1="0%" y1="100%" x2="100%" y2="0%">
            <stop offset="0%" style="stop-color:rgb(50,50,50);stop-opacity:1"/>
            <stop offset="100%" style="stop-color:black;stop-opacity:1"/>
        </linearGradient>
    </defs>
    <filter id="dropshadow" height="130%">
        <feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
        <feOffset dx="2" dy="2" result="offsetblur"/>
        <feMerge>
            <feMergeNode/>
            <feMergeNode in="SourceGraphic"/>
        </feMerge>
    </filter>
    <polygon points="500 474,0 106,495 0" stroke="#36e2f8" stroke-width="3"/>
</svg>

然而，反应似乎不喜欢SVG的linearGradient段。

特别是这两行：

<stop offset="0%" style="stop-color:rgb(50,50,50);stop-opacity:1"/>
<stop offset="100%" style="stop-color:black;stop-opacity:1"/>

除非我删除这两行，否则该应用程序将无法运行，任何想法如何使用JSX编译器工作？

这是来自控制台的错误输出：

× style prop期望从样式属性到值的映射，而不是字符串。例如，使用JSX时style = {{marginRight：spacing +'em'}}。此DOM节点由Logo呈现。

Answer 1

由于错误声明style属性的值应该是对象而不是字符串

试试这个：

<stop offset="0%" style={{stopColor:"rgb(50,50,50)", stopOpacity:1}} />
<stop offset="100%" style={{stopColor:"black", stopOpacity:1}} />

React组件抱怨SVG渐变样式？

1 个答案: