clipPath with image inverts coordinate system.

Code

This component should be giving a rounded rect with an arrow at the bottom.

  const Component = () => (
    <Svg height="56" width="48" viewBox="0 0 48 56">
      <Defs>
        <ClipPath id="tooltip">
          <G stroke="#fff" strokeWidth="1" fill="lime">
            <Rect width="48px" height="48px" rx="5" ry="5" />
            <Path d="M30 47 L25 56 L20 47" />
          </G>
        </ClipPath>
      </Defs>
      <Image
        x="0"
        y="0"
        preserveAspectRatio="xMidYMid slice"
        width="100%"
        height="100%"
        clipPath="url(#tooltip)"
        href={img}
      />
  );

Outcome

As you can see it put the arrow at the top when clipping an image.

Outcome with Rect instead of Image

If I simply replace Image with Rect I get the following

Code

  const Component = () => (
    <Svg height="56" width="48" viewBox="0 0 48 56">
      <Defs>
        <ClipPath id="tooltip">
          <G stroke="#fff" strokeWidth="1" fill="lime">
            <Rect width="48px" height="48px" rx="5" ry="5" />
            <Path d="M30 47 L25 56 L20 47" />
          </G>
        </ClipPath>
      </Defs>
      <Rect width="100%" height="100%" clipPath="url(#tooltip)" fill="blue" />
    </Svg>
  );

[mike-marcacci]

After a cursory look through the code, this inversion jumps out as a likely candidate.

I can’t dive much deeper today, but figured I’d drop this here in case somebody else his time to pick it up.

[mike-marcacci]

@msand - this appears to fix the problem with clipPath, but it turns out I was seeing two inverted-y issues. The other one an inversion of the Image’s “y” coordinate and is fixed by #763.