Question

我试图制作一个使用SMIL动画的SVG图标（好吧，我不在乎它是不是SMIL或CSS，我只是不想使用JS）在悬停时，我已经走得很远，但我遇到了一个我无法在网上找到答案甚至提到的问题。鼠标移动（悬停）时动画开始，但在鼠标移动时，其中一个动画元素（第二个圆圈）保持动画效果，我完全不知道原因。

您也可以在https://codepen.io/anon/pen/LmjpVQ

看到它

感谢您提前提供的任何帮助。

svg { width: 100px; color: red; }

<svg id="location" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60">
<defs>
    <clipPath id="circleClip">
        <path d="M49,19c0,7-12,26-18.97,26C23,45,12,26,12,19H49z M72-12h-84v84h84V-12z" />
    </clipPath>
</defs>
<g clip-path="url(#circleClip)">
    <g transform="matrix(1, 0, 0, 0.43999, 0, 25.2)">
        <circle transform="rotate(-90, 30, 47)" fill="none" stroke="currentColor" stroke-width="2" cx="30" cy="47" r="14">
          <animate attributeType="XML" attributeName="r" from="0" to="20" begin="location.mouseover" end="location.mouseout" dur="3s" repeatCount="indefinite" />
          <animate attributeType="CSS" attributeName="opacity" from="1" to="0" begin="location.mouseover" end="location.mouseout" dur="3s" repeatCount="indefinite" />
      </circle>
        <circle transform="rotate(-90, 30, 47)" fill="none" stroke="currentColor" stroke-width="2" cx="30" cy="47" r="0">
          <animate ttributeType="XML" attributeName="r" from="0" to="20" begin="location.mouseover+2s" end="location.mouseout" dur="3s" repeatCount="indefinite" />
          <animate attributeType="CSS" attributeName="opacity" from="1" to="0" begin="location.mouseover+2" end="location.mouseout" dur="3s" repeatCount="indefinite" />
      </circle>
    </g>
</g>

    <path fill="currentColor" stroke="currentColor" stroke-width="0" d="M30,7c7.18,0,13,5.82,13,13S30,45,30,45S17,27.18,17,20S22.82,7,30,7z" />
    <path fill="#fff" stroke-width="0" d="M30,15c2.76,0,5,2.24,5,5s-2.24,5-5,5c-2.76,0-5-2.24-5-5S27.24,15,30,15" />

</svg>

Answer 1

您陷入的陷阱是，与HTML元素不同，只有当指针位于绘制的区域（笔触或填充）上时，鼠标事件才会被提升为默认值，但无论opacity是什么被设置为。您甚至可以微调pointer-events以包含或排除visibility: hidden或fill: none的事件。

每当您制作动画的扩散圈在指针下方传递时，mouseover事件就会被提升，当pointer-events:all鼠标在内部结束时，您可以阻止mousout，但直到动画重复重置半径。这让事情变得非常混乱。

最简单的解决方案是在整个图标的顶部放置一个带有opacity="0"的隐形矩形，这样就可以清楚地定义＆＃34;内部＆＃34;和＆＃34;外面＆＃34;。要获得更多精细调整，请定义一个覆盖要捕获鼠标移动区域的形状。

＆＃13;

svg { width: 100px; color: red; }

＆＃13;

<svg id="loc" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60">
<defs>
    <clipPath id="c">
        <path d="M49,19c0,7-12,26-18.97,26C23,45,12,26,12,19H49z M72-12h-84v84h84V-12z" />
    </clipPath>
</defs>
<g clip-path="url(#c)">
    <g transform="matrix(1, 0, 0, 0.43999, 0, 25.2)">
        <circle transform="rotate(-90, 30, 47)" fill="none" stroke="currentColor" stroke-width="2" cx="30" cy="47" r="14">
          <animate attributeType="XML" attributeName="r" from="0" to="20" begin="loc.mouseover" end="loc.mouseout" dur="3s" repeatCount="indefinite" />
          <animate attributeType="CSS" attributeName="opacity" from="1" to="0" begin="loc.mouseover" end="loc.mouseout" dur="3s" repeatCount="indefinite" />
      </circle>
        <circle transform="rotate(-90, 30, 47)" fill="none" stroke="currentColor" stroke-width="2" cx="30" cy="47" r="0">
          <animate ttributeType="XML" attributeName="r" from="0" to="20" begin="loc.mouseover+2s" end="loc.mouseout" dur="3s" repeatCount="indefinite" />
          <animate attributeType="CSS" attributeName="opacity" from="1" to="0" begin="loc.mouseover+2" end="loc.mouseout" dur="3s" repeatCount="indefinite" />
      </circle>
    </g>
</g>

    <path fill="currentColor" stroke="currentColor" d="M30,7c7.18,0,13,5.82,13,13S30,45,30,45S17,27.18,17,20S22.82,7,30,7z" />
    <path fill="#fff" d="M30,15c2.76,0,5,2.24,5,5s-2.24,5-5,5c-2.76,0-5-2.24-5-5S27.24,15,30,15" />
    <rect opacity="0" width="100%" height="100%" />
</svg>

＆＃13;

SMIL动画未在Mouseout上结束

1 个答案: