html - Mozilla SVG Circle flipping path demo doing the inverse of its description? - Stack Overflow

The demo that Mozilla has for clip path (Also included below for reference) says that:

Only the portion of the red heart inside the clip circle is visible.

And the clipping path is defined like this:

  <clipPath id="myClip">
    <!--
      Everything outside the circle will be
      clipped and therefore invisible.
    -->
    <circle cx="40" cy="35" r="35" />
  </clipPath>

And it's referenced like this:

  <!--
    Only the portion of the red heart
    inside the clip circle is visible.
  -->
  <use clip-path="url(#myClip)" href="#heart" fill="red" />

Now when we look at the demo, which animates the circle radius from 0 to 60px, the heart ends up clipping the circle, instead of the circle clipping the heart, which is what the demo describes (Says that the demos intention is).

Why is that?

html,
body,
svg {
  height: 100%;
}

/* With a touch of CSS for browsers who *
 * implemented the r Geometry Property. */

@keyframes openYourHeart {
  from {
    r: 0;
  }
  to {
    r: 60px;
  }
}

#myClip circle {
  animation: openYourHeart 15s infinite;
}

<svg viewBox="0 0 100 100">
  <clipPath id="myClip">
    <!--
      Everything outside the circle will be
      clipped and therefore invisible.
    -->
    <circle cx="40" cy="35" r="35" />
  </clipPath>

  <!-- The original black heart, for reference -->
  <path
    id="heart"
    d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z" />

  <!--
    Only the portion of the red heart
    inside the clip circle is visible.
  -->
  <use clip-path="url(#myClip)" href="#heart" fill="red" />
</svg>

The demo that Mozilla has for clip path (Also included below for reference) says that:

Only the portion of the red heart inside the clip circle is visible.

And the clipping path is defined like this:

  <clipPath id="myClip">
    <!--
      Everything outside the circle will be
      clipped and therefore invisible.
    -->
    <circle cx="40" cy="35" r="35" />
  </clipPath>

And it's referenced like this:

  <!--
    Only the portion of the red heart
    inside the clip circle is visible.
  -->
  <use clip-path="url(#myClip)" href="#heart" fill="red" />

Now when we look at the demo, which animates the circle radius from 0 to 60px, the heart ends up clipping the circle, instead of the circle clipping the heart, which is what the demo describes (Says that the demos intention is).

Why is that?

html,
body,
svg {
  height: 100%;
}

/* With a touch of CSS for browsers who *
 * implemented the r Geometry Property. */

@keyframes openYourHeart {
  from {
    r: 0;
  }
  to {
    r: 60px;
  }
}

#myClip circle {
  animation: openYourHeart 15s infinite;
}

<svg viewBox="0 0 100 100">
  <clipPath id="myClip">
    <!--
      Everything outside the circle will be
      clipped and therefore invisible.
    -->
    <circle cx="40" cy="35" r="35" />
  </clipPath>

  <!-- The original black heart, for reference -->
  <path
    id="heart"
    d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z" />

  <!--
    Only the portion of the red heart
    inside the clip circle is visible.
  -->
  <use clip-path="url(#myClip)" href="#heart" fill="red" />
</svg>

• html
• css
• svg
• clip-path

Share Follow asked Mar 3 at 21:07 OleOle 47.5k7070 gold badges238238 silver badges445445 bronze badges 3

• 2 It is definitely confusing until you realize there's two hearts: A black heart that is unclipped, and a red heart on top of it that is being clipped by the circle. – Sean Commented Mar 3 at 22:02
• @Sean Why not submit a pull request with your fix for this? – Robert Longson Commented Mar 3 at 23:03
• @RobertLongson A good idea! Won't be able to get to it for awhile though. Temani might be quicker on the draw. – Sean Commented Mar 4 at 15:46

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 5

You have two hearts above each other. The one defined by path (not clipped) and the one defined by use (clipped) that uses the same path.

Keep only one to better see the effect:

html,
body,
svg {
  height: 100%;
}

/* With a touch of CSS for browsers who *
 * implemented the r Geometry Property. */

@keyframes openYourHeart {
  from {
    r: 0;
  }
  to {
    r: 60px;
  }
}

#myClip circle {
  animation: openYourHeart 15s infinite;
}

<svg viewBox="0 0 100 100">
  <clipPath id="myClip">
    <!--
      Everything outside the circle will be
      clipped and therefore invisible.
    -->
    <circle cx="40" cy="35" r="35" />
  </clipPath>

  <!-- The original black heart, for reference -->
  <path clip-path="url(#myClip)"
    id="heart" fill="red"
    d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z" />

</svg>