react-native-svg
react-native-svg copied to clipboard
software-mansion
Xlinkhref only work on web does not work on ios and android (the color did not get inherited )
import * as React from "react"
import Svg, { Defs, LinearGradient, Stop, Path } from "react-native-svg"
const SvgComponent = (props) => (
<Svg
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
data-name="Layer 2"
viewBox="0 0 2010 2010"
{...props}
>
<Defs>
<LinearGradient
id="b"
x1={-29.51}
x2={1052.68}
y1={1310.92}
y2={-49.54}
gradientUnits="userSpaceOnUse"
>
<Stop offset={0.7} stopColor="#ffe88a" />
<Stop offset={1} stopColor="#ffe4c5" />
</LinearGradient>
<LinearGradient
id="a"
x1={1517.81}
x2={137.65}
y1={899.78}
y2={1912.32}
gradientUnits="userSpaceOnUse"
>
<Stop offset={0} stopColor="#69bbff" />
<Stop offset={1} stopColor="#1798ff" />
</LinearGradient>
<LinearGradient
href="#a"
id="c"
x1={1708.95}
x2={328.79}
y1={1160.32}
y2={2172.86}
/>
<LinearGradient
href="#a"
id="d"
x1={1900.09}
x2={519.93}
y1={1420.86}
y2={2433.4}
/>
<LinearGradient
id="e"
x1={352.85}
x2={685.61}
y1={1180.88}
y2={497.22}
gradientUnits="userSpaceOnUse"
>
<Stop offset={0} stopColor="#1e2121" />
<Stop offset={1} stopColor="#1e2121" stopOpacity={0} />
</LinearGradient>
<LinearGradient
id="f"
x1={188.04}
x2={1821.96}
y1={891.69}
y2={891.69}
gradientUnits="userSpaceOnUse"
>
<Stop offset={0} stopColor="#69bbff" />
<Stop offset={1} stopColor="#9de0f4" />
</LinearGradient>
</Defs>
<Path
d="M334.2 915.59c-1.47 0-2.94 0-4.42-.13a75 75 0 0 1-60.51-37.31 485.26 485.26 0 0 1 824.19-511.54 75 75 0 0 1-34.36 111.15 447 447 0 0 0-253.23 263.06 75 75 0 0 1-94.51 45.72 284.09 284.09 0 0 0-219.1 16.2 285.71 285.71 0 0 0-98 82.77 75 75 0 0 1-60.06 30.08Z"
style={{
fill: "url(#b)",
}}
/>
<Path
d="M479.92 1784.73c-54.55 0-92.42-54.33-73.55-105.51L457.71 1540a23.67 23.67 0 0 1 22.21-15.49 23.68 23.68 0 0 1 22.22 15.49l51.34 139.24c18.87 51.16-19 105.49-73.56 105.49Z"
fill= "url(#a)"
style={{
fill: "url(#a)",
}}
/>
<Path
d="M1026.2 1784.73c-54.55 0-92.43-54.33-73.56-105.51L1004 1540a23.68 23.68 0 0 1 22.22-15.49 23.66 23.66 0 0 1 22.21 15.49l51.34 139.24c18.86 51.16-19.02 105.49-73.57 105.49Z"
style={{
fill: "url(#c)",
}}
/>
<Path
d="M1572.47 1784.73c-54.55 0-92.42-54.33-73.55-105.51l51.34-139.22a23.67 23.67 0 0 1 22.21-15.49 23.68 23.68 0 0 1 22.22 15.49l51.31 139.22c18.9 51.18-19 105.51-73.53 105.51Z"
fill="url(#d)"
style={{
fill: "url(#d)",
}}
/>
<Path
d="M954.43 228.87A715.8 715.8 0 0 0 625 501.84h-4a552 552 0 0 0-413.83 186.25 484.58 484.58 0 0 0 62.1 190.06 75 75 0 0 0 60.51 37.31c1.48.09 3 .13 4.42.13a75 75 0 0 0 60.05-30.08 285.71 285.71 0 0 1 98-82.77 284.09 284.09 0 0 1 219.1-16.2 75 75 0 0 0 94.51-45.72 447 447 0 0 1 253.24-263.06 75 75 0 0 0 34.36-111.15 486 486 0 0 0-139.03-137.74Z"
style={{
opacity: 0.1,
fill: "url(#e)",
}}
/>
<Path
d="M1225.84 1487.81H621a432.85 432.85 0 0 1-346.86-692.15 433.61 433.61 0 0 1 417.19-168.14 596.37 596.37 0 1 1 534.51 860.29Z"
style={{
fill: "url(#f)",
}}
/>
</Svg>
)
export default SvgComponent
snack link : https://snack.expo.dev/?platform=web
I also encountered the same problem
<svg
id="图层_1"
data-name="图层 1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 62.59 76.08">
<ellipse
cx="31.35"
cy="60.59"
rx="31.25"
ry="15.49"
style="fill: url(#未命名的渐变_18)" />
<ellipse cx="31.35" cy="47.32" rx="31.25" ry="17.17" style="fill: #d59163" />
<circle cx="23.79" cy="53.02" r="2.03" style="fill: #603813" />
<circle cx="41.72" cy="53.02" r="2.03" style="fill: #603813" />
<path
d="M34.18,54.62a1.87,1.87,0,0,1-3.73,0c0-1,.84-1.21,1.86-1.21S34.18,53.59,34.18,54.62Z"
style="fill: #603813" />
<polyline
points="30.58 56.95 32.31 55.52 34.05 56.95"
style="
fill: none;
stroke: #603813;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.60881295917541px;
" />
<path
d="M62.5,34.6c0,11.52-14,13-31.25,13S0,46.12,0,34.6,12.87,16.12,31.25,16.12,62.5,23.08,62.5,34.6Z"
style="fill: url(#未命名的渐变_18-2)" />
<path
d="M18.54,21.58s14.61-.65,25.54,10.28"
style="
fill: none;
stroke: #eba178;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2.41321943876311px;
" />
<path
d="M36.16,18.71a26.38,26.38,0,0,1,13.21,8"
style="
fill: none;
stroke: #eba178;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2.41321943876311px;
" />
<path
d="M16.48,29.6s9.09-8.52,25.68-10.22"
style="
fill: none;
stroke: #eba178;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2.41321943876311px;
" />
<path
d="M31.94,31.86a31.18,31.18,0,0,1,13-5.14"
style="
fill: none;
stroke: #eba178;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2.41321943876311px;
" />
<path
d="M9,46.15a5.66,5.66,0,0,1,.42-5.79c2.06-2.83,9-2.13,10.83.94S20.07,48,20.07,48"
style="
fill: #d59163;
stroke: #603813;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.12616907142279px;
" />
<path
d="M56.35,46.15a5.66,5.66,0,0,0-.42-5.79c-2-2.83-9-2.13-10.83.94s.14,6.66.14,6.66"
style="
fill: #d59163;
stroke: #603813;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.12616907142279px;
" />
<path
d="M30.68,26.54c-10.13,0-14.86-5.06-14.26-11.09.76-7.8,5.46-7.31,7.57-10.64S26.24,0,29.36,0,45.13,4.69,46.05,14.13,39.92,26.54,30.68,26.54Z"
style="fill: #fff4e7" />
<ellipse cx="27.27" cy="13.31" rx="1.22" ry="1.44" style="fill: #8c7e7a" />
<ellipse cx="35.64" cy="13.31" rx="1.22" ry="1.44" style="fill: #8c7e7a" />
<defs>
<radialGradient
id="未命名的渐变_18"
cx="31.94"
cy="52.27"
r="25.36"
gradientTransform="translate(105.92 17.7) rotate(87.98) scale(1 1.44)"
gradientUnits="userSpaceOnUse">
<stop offset="0.72" stop-color="#fab47d" />
<stop offset="1" stop-color="#ffd2a0" />
</radialGradient>
<radialGradient
id="未命名的渐变_18-2"
cx="31"
cy="15.81"
r="32.68"
gradientTransform="translate(55.97 -15.2) rotate(90) scale(1 1.58)"
xlink:href="#未命名的渐变_18" />
</defs>
</svg>
I also encountered the same problem
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 62.59 76.08"> <ellipse cx="31.35" cy="60.59" rx="31.25" ry="15.49" style="fill: url(#未命名的渐变_18)" /> <ellipse cx="31.35" cy="47.32" rx="31.25" ry="17.17" style="fill: #d59163" /> <circle cx="23.79" cy="53.02" r="2.03" style="fill: #603813" /> <circle cx="41.72" cy="53.02" r="2.03" style="fill: #603813" /> <path d="M34.18,54.62a1.87,1.87,0,0,1-3.73,0c0-1,.84-1.21,1.86-1.21S34.18,53.59,34.18,54.62Z" style="fill: #603813" /> <polyline points="30.58 56.95 32.31 55.52 34.05 56.95" style=" fill: none; stroke: #603813; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.60881295917541px; " /> <path d="M62.5,34.6c0,11.52-14,13-31.25,13S0,46.12,0,34.6,12.87,16.12,31.25,16.12,62.5,23.08,62.5,34.6Z" style="fill: url(#未命名的渐变_18-2)" /> <path d="M18.54,21.58s14.61-.65,25.54,10.28" style=" fill: none; stroke: #eba178; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.41321943876311px; " /> <path d="M36.16,18.71a26.38,26.38,0,0,1,13.21,8" style=" fill: none; stroke: #eba178; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.41321943876311px; " /> <path d="M16.48,29.6s9.09-8.52,25.68-10.22" style=" fill: none; stroke: #eba178; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.41321943876311px; " /> <path d="M31.94,31.86a31.18,31.18,0,0,1,13-5.14" style=" fill: none; stroke: #eba178; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.41321943876311px; " /> <path d="M9,46.15a5.66,5.66,0,0,1,.42-5.79c2.06-2.83,9-2.13,10.83.94S20.07,48,20.07,48" style=" fill: #d59163; stroke: #603813; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.12616907142279px; " /> <path d="M56.35,46.15a5.66,5.66,0,0,0-.42-5.79c-2-2.83-9-2.13-10.83.94s.14,6.66.14,6.66" style=" fill: #d59163; stroke: #603813; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.12616907142279px; " /> <path d="M30.68,26.54c-10.13,0-14.86-5.06-14.26-11.09.76-7.8,5.46-7.31,7.57-10.64S26.24,0,29.36,0,45.13,4.69,46.05,14.13,39.92,26.54,30.68,26.54Z" style="fill: #fff4e7" /> <ellipse cx="27.27" cy="13.31" rx="1.22" ry="1.44" style="fill: #8c7e7a" /> <ellipse cx="35.64" cy="13.31" rx="1.22" ry="1.44" style="fill: #8c7e7a" /> <defs> <radialGradient id="未命名的渐变_18" cx="31.94" cy="52.27" r="25.36" gradientTransform="translate(105.92 17.7) rotate(87.98) scale(1 1.44)" gradientUnits="userSpaceOnUse"> <stop offset="0.72" stop-color="#fab47d" /> <stop offset="1" stop-color="#ffd2a0" /> </radialGradient> <radialGradient id="未命名的渐变_18-2" cx="31" cy="15.81" r="32.68" gradientTransform="translate(55.97 -15.2) rotate(90) scale(1 1.58)" xlink:href="#未命名的渐变_18" /> </defs> </svg>
I think it takes really long time to fix it , I convert it to png , you can try this too