Линейный градиент отображает черный цвет при реализации с использованиемact-native-svg - PullRequest
Новая
       20

Линейный градиент отображает черный цвет при реализации с использованиемact-native-svg

0 голосов
/ 05 июля 2019

React-Native Версия: 0.59.8

react-native-svg версия: 9.4.0

OS Implementation: Android

Я написал несколько SVGкод в HTML, и он работает как ожидалось: 

<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>

Может кто-нибудь помочь мне с этим?

...