React native 如何在react原生svg元素中实现fill属性

我用路径/线绘制了一个简单的三角形，从AdobeXD导出为SVG，然后将SVG代码复制并调整到带有react本机SVG库元素的react本机项目中。我试图填充元素的背景，因为我不希望它是透明的。我原以为这就像在G元素中使用websvg的

fill

属性一样简单，但它不起作用

以下是SVG代码：

<Svg width="22.364" height="20.315" viewBox="0 0 22.364 20.315">
    <G fill="#fff" transform="translate(0.682 0.632)">
        <Line
            id="Line_37"
            data-name="Line 37"
            x1="21"
            y1="12"
            transform="translate(0 7)"
            stroke="rgba(69,74,102, .5)"
            stroke-linecap="round"
            stroke-width="1"
        />
        <Line
            id="Line_38"
            data-name="Line 38"
            y2="19"
            transform="translate(21)"
            stroke="rgba(69,74,102, .5)"
            stroke-linecap="round"
            stroke-width="1"
        />
        <Line
            id="Line_40"
            data-name="Line 40"
            x1="21"
            y2="7"
            stroke="#fff"
            stroke-linecap="round"
            stroke-width="1"
        />
    </G>
</Svg>

---

查看了

react native svg

的文档，他们说“fill prop指的是形状内部的颜色。”但正如我所说，

fill

prop在

元素和

元素中都不起作用。。。有什么想法吗？

在

G

上设置

fill

道具将对子元素（您案例中的

行

元素）产生影响，而不是对整个组产生影响

您可以绘制一个覆盖整个SVG的白色矩形，以实现您的目标：

<Svg width="22.364" height="20.315" viewBox="0 0 22.364 20.315">
<Rect
    x="0"
    y="0"
    width="100%"
    height="100%"
    fill="white"
/>
<G fill="#fff" transform="translate(0.682 0.632)">
    <Line
        id="Line_37"
        data-name="Line 37"
        x1="21"
        y1="12"
        transform="translate(0 7)"
        stroke="rgba(69,74,102, .5)"
        stroke-linecap="round"
        stroke-width="1"
    />
    <Line
        id="Line_38"
        data-name="Line 38"
        y2="19"
        transform="translate(21)"
        stroke="rgba(69,74,102, .5)"
        stroke-linecap="round"
        stroke-width="1"
    />
    <Line
        id="Line_40"
        data-name="Line 40"
        x1="21"
        y2="7"
        stroke="#fff"
        stroke-linecap="round"
        stroke-width="1"
    />
</G>