Início / coding / Perguntas / 79482152
Accepted
Ole
Asked: 2025-03-04 05:07:01 +0800 CST

Demonstração de inversão de caminho do Mozilla SVG Circle fazendo o inverso da sua descrição?

  • 772

A demonstração que a Mozilla tem para o clip path (também incluída abaixo para referência) diz que:

Somente a parte do coração vermelho dentro do círculo do clipe fica visível.

E o caminho de recorte é definido assim:

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

E é referenciado assim:

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

Agora, quando olhamos para a demonstração, que anima o raio do círculo de 0a 60px, o coração acaba cortando o círculo, em vez do círculo cortar o coração, que é o que a demonstração descreve (diz que é a intenção da demonstração).

Por que é que?

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

1 respostas

  1. Best Answer

    Você tem dois corações um acima do outro. O definido por path(não recortado) e o definido por use(recortado) que usa o mesmo caminho.

    Mantenha apenas um para ver melhor o efeito:

    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>

    • 5

relate perguntas