2

我有一个用路径/线绘制的简单三角形，从 Adob​​eXD 导出为 SVG，然后将 SVG 代码复制并调整到带有 react-native-svg 库元素的 react-native 项目中。我正在尝试填充元素的背景，因为我不希望它是透明的。我认为这就像在 G 元素中使用 web SVG 的属性一样简单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's 文档，他们说“填充道具是指形状内的颜色。” 但就像我说的那样，道具在元素和元素fill中都不起作用......有什么想法吗？<Svg><G>

4

1 回答 1

0

设置fill道具G将对子元素（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>

于 2020-05-28T16:25:53.913 回答