使用 SVG 模式作为背景

【问题标题】：Using SVG Pattern as Background使用 SVG 模式作为背景
【发布时间】：2021-11-29 23:23:14
【问题描述】：

React-Native-svg 支持 SVG 模式，但是我不知道如何应用它... 当我尝试documentation 中的最小示例时，我得到一个白屏、白屏。

<View
    style={{paddingTop: 20,
    height: '100%',
    flex: 1,
    backgroundColor: 'white'}}>
    <Svg width="100%" height="100%" viewBox="0 0 800 400">
        <Defs>
            <Pattern
                id="TrianglePattern"
                patternUnits="userSpaceOnUse"
                x="0"
                y="0"
                width="100"
                height="100"
                viewBox="0 0 10 10">
                <Path d="M 0 0 L 7 0 L 3.5 7 z" fill="red" stroke="blue" />
            </Pattern>
        </Defs>
    </Svg>
</View>

这是为什么呢？

【问题讨论】：

你需要将图案应用到某物上，即有一个填充或描边是图案ID的形状。

标签： javascript react-native svg react-native-svg

【解决方案1】：

正如@Robert Longson 在 Q 下方的评论中指出的那样。您需要一个形状（如 rect 或 ellipse），并在 pattern 中给出 id。

 <Svg width="100%" height="100%" viewBox="0 0 800 400">
      <Defs>
        <Pattern
          id="TrianglePattern"
          patternUnits="userSpaceOnUse"
          x="0"
          y="0"
          width="100"
          height="100"
          viewBox="0 0 10 10"
        >
          <Path d="M 0 0 L 7 0 L 3.5 7 z" fill="red" stroke="blue" />
        </Pattern>
      </Defs>
      <Rect fill="none" stroke="blue" x="1" y="1" width="798" height="398" />
      <Ellipse
        fill="url(#TrianglePattern)" // make sure this is the id given in the pattern
        stroke="black"
        strokeWidth="5"
        cx="400"
        cy="200"
        rx="350"
        ry="150"
      />
    </Svg>

【讨论】：