Using SVG Pattern as Background

Question

React-Native-svg supports SVG pattern, however, I am not sure how to apply it... When I try the minimal example from the documentation, I get a blanc screen, white screen.

<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>

Why is that?

Yuo need to apply the pattern to something i.e. have a shape whose fill or stroke is the pattern's id. — Robert Longson, Oct 11 '21 at 07:28

score 0 · Answer 1 · edited Oct 11 '21 at 15:00

0

As @Robert Longson pointed out in a comment below the Q. You need a shape (like a rect or ellipse) with the id given in the pattern.

 <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>

edited Oct 11 '21 at 15:00

Alexandr_TT

13,635
3
27
54

answered Oct 11 '21 at 08:00

four-eyes

10,740
29
111
220

Its not working in IOS – Muneem Habib Jan 31 '23 at 07:09
It is, I am using it currently :) – four-eyes Jan 31 '23 at 13:49
Do you know if it has to be in a or that's unimportant? – IMPixel Feb 28 '23 at 21:46

Using SVG Pattern as Background

1 Answers1