Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Not work ClipPath/Path on Android

See original GitHub issue

1.)

            <Svg width="200" height="150" viewBox="6 0 200 160" >
                <G>
                    <Defs>
                        <ClipPath
                            id="clip-path">
                            <Path d="M179.33,9.5H13.83S6.1,9.38,3.33,6.58A19,19,0,0,1,0,1.83V123.17A17.33,17.33,0,0,0,17.33,140.5h162a17.33,17.33,0,0,0,17.33-17.33V26.83A17.33,17.33,0,0,0,179.33,9.5Z"
                                fill="none" />
                        </ClipPath>
                    </Defs>
                    <G clipPath="url(#clip-path)">
                        <Image
                            width="240"
                            height="150"
                            href={this.props.image}/>
                    </G>
                </G>
            </Svg>
        </View>

2.) Run on ios - All good! screenshot at 13 12-28-04

3.) Run on android - Does not work ys3uqowkt0o

Why ?

Issue Analytics

State:
Created 7 years ago
Reactions:9
Comments:11

Top GitHub Comments

1reaction

dusavecommented, Dec 18, 2017

@logvi thanks for posting, I’ll take a look

1reaction

logvicommented, Dec 18, 2017

@dustinsavery “react-native-svg”: “^6.0.0”, “react-native”: “0.50.3”, android 5.1.1

clipPath prop for Image is not working. This is my code:

<Svg
  height="100"
  width="100"
>
<Defs>
   <ClipPath id="clip">
          <G>
             <Path d="M 50 100 A 50 50 0 0 0 50 0 L 50 50" />
          </G>
   </ClipPath>
</Defs>
<Image
   width="100%"
   height="100%"
   href={URL}
   clipPath="url(#clip)"
/>
</Svg>