如何解决React黑色填充的本机SVG
我正在尝试使用react-native-svg在我的React Native应用程序中使用.svg文件，但结果是SVG充满了黑色。
代替此：
我知道了：
xLinkHref标签对SVG没有影响，这就是为什么只有带有prexfix__a引用的第一个路径才起作用的原因，因为它是带有渐变描述的路径。
我也尝试使用react-native-svg-transformer，但结果相同。我知道xlink:href已过时，但不知道它是否仍在工作。
<Svg width={306.5} height={83.553} viewBox="0 0 306.5 83.553">
<Defs>
<LinearGradient
id="prefix__a"
x1={-4.103}
y1={0.382}
x2={34.818}
y2={1.331}
gradientUnits="objectBoundingBox"
>
<Stop offset={0} stopColor="#9a50ea" />
<Stop offset={1} stopColor="#673ab7" />
</LinearGradient>
<LinearGradient
id="prefix__b"
x1={-4.114}
y1={0.464}
x2={70.809}
y2={0.985}
xlinkHref="#prefix__a"
/>
<LinearGradient
id="prefix__c"
x1={-0.503}
y1={0.487}
x2={6.59}
y2={0.579}
xlinkHref="#prefix__a"
/>
<LinearGradient
id="prefix__d"
x1={-3.586}
y1={0.466}
x2={11.489}
y2={0.59}
xlinkHref="#prefix__a"
/>
<LinearGradient
id="prefix__e"
x1={-2.869}
y1={0.455}
x2={6.24}
y2={0.577}
xlinkHref="#prefix__a"
/>
<LinearGradient
id="prefix__f"
x1={-4.821}
y1={0.451}
x2={6.009}
y2={0.548}
xlinkHref="#prefix__a"
/>
<LinearGradient
id="prefix__g"
x1={-15.525}
y1={0.452}
x2={12.192}
y2={0.535}
xlinkHref="#prefix__a"
/>
<LinearGradient
id="prefix__h"
x1={-6.142}
y1={0.418}
x2={3.813}
y2={0.539}
xlinkHref="#prefix__a"
/>
<LinearGradient
id="prefix__i"
x1={-6.55}
y1={0.404}
x2={2.371}
y2={0.526}
xlinkHref="#prefix__a"
/>
</Defs>
<G data-name="Calque 2">
<G data-name="Calque 1">
<Path
data-name="Trac\xE9 92"
d="M36.755 149.276v.366a1.517 1.517 0 00.424 1.046l3.448 3.558a1.507 1.507 0 002.166 0l3.469-3.558a1.523 1.523 0 00.429-1.046v-.392a19.816 19.816 0 01-9.942.031z"
transform="translate(-17.52 -71.153)"
fill="url(#prefix__a)"
/>
<Path
data-name="Trac\xE9 93"
d="M5.164 100.21h-.2A4.966 4.966 0 000 105.176a4.966 4.966 0 004.966 4.971h.2a19.852 19.852 0 010-9.937z"
transform="translate(0 -47.773)"
fill="url(#prefix__b)"
/>
<Path
data-name="Trac\xE9 94"
d="M45.527 39.329C34.073 39.486 25 49.156 25 60.678v10.544H12.746a19.156 19.156 0 000 9.994H25v13.8a18.837 18.837 0 009.942-.031V60.531a11.093 11.093 0 0110.1-11.182 10.931 10.931 0 0111.631 11.706 11.077 11.077 0 01-11.114 10.167h-6.6a2.862 2.862 0 00-2.852 2.873v4.249a2.862 2.862 0 002.857 2.873h6.5a20.944 20.944 0 10.063-41.886z"
transform="translate(-5.76 -18.748)"
fill="url(#prefix__c)"
/>
<Path
data-name="Trac\xE9 95"
d="M160.945 46.611a3.265 3.265 0 01-3.365 2.873h-.994a12.17 12.17 0 00-9.942 5.887v22.358a3.276 3.276 0 01-3.276 3.281h-4.353a3.276 3.276 0 01-3.276-3.281V43.5a3.276 3.276 0 013.276-3.265h3.951a3.281 3.281 0 013.281 3.281v.837c2.438-3.024 6.891-4.96 11.852-4.96h.078a3.27 3.27 0 013.208 3.663z"
transform="translate(-64.714 -18.778)"
fill="url(#prefix__d)"
/>
<Path
data-name="Trac\xE9 96"
d="M231.927 80.973h-3.951a3.281 3.281 0 01-3.281-3.281 17.021 17.021 0 01-11.349 4.123 20.5 20.5 0 01-15.384-6.9 21.9 21.9 0 01-5.233-14.29c0-12.035 8.9-21.27 20.009-21.27a18.638 18.638 0 0111.935 4.123 3.281 3.281 0 013.3-3.265h3.951a3.281 3.281 0 013.281 3.281v34.21a3.281 3.281 0 01-3.278 3.269zm-7.66-26.482a12.558 12.558 0 00-10.088-5.044c-6.389 0-10.507 5.3-10.507 11.182 0 6.389 4.626 11.1 10.758 11.1a11.941 11.941 0 009.837-5.044z"
transform="translate(-91.884 -18.762)"
fill="url(#prefix__e)"
/>
<Path
data-name="Trac\xE9 97"
d="M323.9 68.2a3.286 3.286 0 01-2.883 3.846 32.964 32.964 0 01-3.344.2c-6.562 0-11.349-2.187-14.128-5.887-2.093-2.773-3.024-6.389-3.024-12.187v-14.3h-8.069a3.281 3.281 0 01-3.282-3.272v-2.69a3.281 3.281 0 013.281-3.265h8.069v-8.084a3.281 3.281 0 013.28-3.281h4.369a3.281 3.281 0 013.281 3.281v8.084h10.172a3.276 3.276 0 013.276 3.281v2.69a3.276 3.276 0 01-3.276 3.276H311.45v15.539c0 2.517.419 4.034 1.345 5.128 1.094 1.261 2.857 2.015 5.546 2.015a14.892 14.892 0 001.57-.058 3.27 3.27 0 013.459 2.684z"
transform="translate(-137.861 -9.19)"
fill="url(#prefix__f)"
/>
<Path
data-name="Trac\xE9 98"
d="M381.488 0a7 7 0 11-5.038 1.991A6.98 6.98 0 01381.488 0zm2.187 62.209h-4.385a3.276 3.276 0 01-3.276-3.281V24.717a3.276 3.276 0 013.276-3.265h4.374a3.276 3.276 0 013.276 3.281v34.21a3.276 3.276 0 01-3.276 3.265z"
transform="translate(-178.466 .003)"
fill="url(#prefix__g)"
/>
<Path
data-name="Trac\xE9 99"
d="M453.649 70.581a3.265 3.265 0 01.408 4.887c-4.369 4.416-9.67 6.378-16.1 6.378-12.61 0-21.856-9.419-21.856-21.186 0-11.852 9.5-21.27 21.94-21.27a22.06 22.06 0 0114.651 5.473 3.286 3.286 0 010 4.913l-2.873 2.491a3.229 3.229 0 01-4.233.078 11.423 11.423 0 00-7.561-2.883 10.926 10.926 0 00-10.988 11.182c0 6.389 4.626 11.1 11.266 11.1a11.663 11.663 0 007.953-3.255 3.3 3.3 0 014.249-.272z"
transform="translate(-198.375 -18.777)"
fill="url(#prefix__h)"
/>
<Path
data-name="Trac\xE9 100"
d="M524.549 39.36c12.359 0 21.689 9.5 21.689 21.27s-9.33 21.186-21.689 21.186S502.86 72.4 502.86 60.63s9.33-21.27 21.689-21.27zm0 32.368c6.389 0 10.758-4.96 10.758-11.1s-4.369-11.182-10.758-11.182-10.763 5.044-10.763 11.177 4.374 11.105 10.763 11.105z"
transform="translate(-239.738 -18.763)"
fill="url(#prefix__i)"
/>
</G>
</G>
</Svg>
解决方法
我认为当前不支持该功能：https://github.com/react-native-community/react-native-svg/issues/1326。
但是，如果您只关心继承部分，则可以通过为LinearGradient创建自定义组件来解决此问题，如下所示：
const CustomLinearGradient = (props) => {
return (
<LinearGradient gradientUnits="objectBoundingBox" {...props}>
<Stop offset={0} stopColor="#9a50ea" />
<Stop offset={1} stopColor="#673ab7" />
</LinearGradient>
);
};
然后您可以像这样使用此组件：
// ...
<Defs>
<CustomLinearGradient
id="prefix__a"
x1={-4.103}
y1={0.382}
x2={34.818}
y2={1.331}
/>
// other CustomLinearGradient instances... (prefix b-i)
</Defs>
// ...
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
