0

React-Native版本：0.59.8

react-native-svg版本：9.4.0

OS Implementation： 安卓

我用 HTML 编写了一些 SVG 代码，它按预期工作：

<svg width="300" height="300">
    <defs>
        <linearGradient id="grad" x1="0%" x2="0%" y1="0%" y2="70%" gradientUnits="userSpaceOnUse">
            <stop offset="70%" style="stop-color: white;"></stop>
            <stop offset="30%" style="stop-color: blue"></stop>
        </linearGradient>
</defs>

<path fill="url(#grad)" d="M42.34,26.09c-.17,3.59,2.29,19.8,1.71,30.43-.56,10.45-.14,23.23-3.28,47.57,0,0-.91,4.73,0,7.76s5.48,14-.41,24.2c-4.87,8.47-6.77,22.75-7.08,40-.06,3.55-.63,7.59.49,11.25,0,0,.81,5,6.86,7.48s5.26,6.52,15,7.65c0,0,8.63-1.42,10.39,2.08,1.33,3-4.13,4-10.68,4.73-3.61.42-12.37-1.32-18-2-7.61-1-9.66.75-14.2.49C18,207.4,13,206.21,18,188.05c3.08-14.17-2.12-22.62-2-41,1-16.37,5.58-18.47,2.54-31.35C17,100.06,8.24,89.75,10.76,59.75,11.67,50.88,1.33,45.57,1,33.52A29.72,29.72,0,0,1,8.15,13.63C10.58,10.58,9.75,1,9.75,1H42.51S43.25,7.4,42.34,26.09Z" style="stroke-width: 3; stroke: black"></path>
</svg>

但是当我在 中编写相同的代码时react-native，它不会渲染线性渐变，只是将其变成黑色。

<Defs>
        <LinearGradient id="grad" x1="0%" x2="0%" y1="0%" y2="70%" gradientUnits="userSpaceOnUse">
            <Stop offset="70%" stopColor="red"></Stop>
            <Stop offset="30%" stopColor="blue"></Stop>
        </LinearGradient>
      </Defs>
        <Svg
            width="270"
            height="270"
            fill="white"
            viewBox="0 0 67.23 210.29"
        >

          <Path fill="url(#grad)" d="M42.34,26.09c-.17,3.59,2.29,19.8,1.71,30.43-.56,10.45-.14,23.23-3.28,47.57,0,0-.91,4.73,0,7.76s5.48,14-.41,24.2c-4.87,8.47-6.77,22.75-7.08,40-.06,3.55-.63,7.59.49,11.25,0,0,.81,5,6.86,7.48s5.26,6.52,15,7.65c0,0,8.63-1.42,10.39,2.08,1.33,3-4.13,4-10.68,4.73-3.61.42-12.37-1.32-18-2-7.61-1-9.66.75-14.2.49C18,207.4,13,206.21,18,188.05c3.08-14.17-2.12-22.62-2-41,1-16.37,5.58-18.47,2.54-31.35C17,100.06,8.24,89.75,10.76,59.75,11.67,50.88,1.33,45.57,1,33.52A29.72,29.72,0,0,1,8.15,13.63C10.58,10.58,9.75,1,9.75,1H42.51S43.25,7.4,42.34,26.09Z" strokeWidth="3" stroke="black" />
        </Svg>

有人可以帮我解决这个问题吗？

4

0 回答 0