如何在react-native-svg元素中实现属性填充

Question

我有一个用路径/线绘制的简单三角形，从AdobeXD导出为SVG，然后将SVG代码复制并调整到带有react-native-svg库元素的react-native项目中。我试图填充元素的背景，因为我不希望它是透明的。我以为它会像在G元素中使用web的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属性在<Svg>元素和<G>元素中都不起作用……你有什么想法？

Answer 1

在G上设置fill属性会对子元素(在本例中是Line元素)产生影响，而不是对整个组产生影响。

您可以绘制一个覆盖整个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>

​