React-Native
版本:0.59.8
react-native-svg
版本:9.4.0
OS Implementation
:Android
我已经用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>
有人可以帮我吗?