Skip to content

Instantly share code, notes, and snippets.

@ccprog

ccprog/hover.svg

Created Aug 30, 2017
Embed
What would you like to do?
a strange animation behavior
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" height="160" width="250">
<defs>
<path id="sq" d="M 15,45 L 15,115 L 140,115 L 155,45 Z M 155,45 L 155,45 L 155,45 L 155,45 Z">
<animate id="grow" attributeName="d" attributeType="XML" begin="over.mouseover" dur="2s"
fill="freeze" calcMode="spline" keySplines=".42 0 .58 1"
from="M 15,45 L 15,115 L 140,115 L 155,45 Z M 155,45 L 155,45 L 155,45 L 155,45 Z"
to="M 0,0 L 0,160 L 250,160 L 250,0 Z M 15,45 L 155,45 L 140,115 L 15,115 Z" />
<animate id="shrink" attributeName="d" attributeType="XML" begin="over.mouseout" dur="2s"
fill="freeze" calcMode="spline" keySplines=".42 0 .58 1"
from="M 0,0 L 0,160 L 250,160 L 250,0 Z M 15,45 L 155,45 L 140,115 L 15,115 Z"
to="M 15,45 L 15,115 L 140,115 L 155,45 Z M 155,45 L 155,45 L 155,45 L 155,45 Z" />
</path>
<text id="txt" x="30" y="94" style="font-family:serif;font-weight:bold;font-size:48px;">abc</text>
<path id="ar" d="M 200.857,65.8574 197.322,69.3926 205.43,77.5 H 185 V 82.5 H 205.43 L 197.322,90.6074 200.857,94.1426 215,80 Z M 220,80 A 20,20 0 0 1 180,80 20,20 0 0 1 220,80 Z">
<animateTransform id="turnLeft" attributeName="transform" attributeType="XML"
begin="over.mouseover" dur="2s"
fill="freeze" calcMode="spline" keySplines=".42 0 .58 1"
type="rotate" from="0 200 80" to="90 200 80" />
<animateTransform id="turnRight" attributeName="transform" attributeType="XML"
begin="over.mouseout" dur="2s"
fill="freeze" calcMode="spline" keySplines=".42 0 .58 1"
type="rotate" from="90 200 80" to="0 200 80" />
</path>
<mask id="mk1">
<rect height="160" width="250" fill="white" />
<use xlink:href="#txt" fill="black" />
<use xlink:href="#ar" fill="black" />
</mask>
<mask id="mk2">
<rect height="160" width="250" fill="white" />
<use xlink:href="#sq" fill="black" />
</mask>
</defs>
<use xlink:href="#txt" fill="#e60000" mask="url(#mk2)" />
<use xlink:href="#ar" fill="black" mask="url(#mk2)" />
<use xlink:href="#sq" fill="#e60000" mask="url(#mk1)" />
<rect id="over" height="160" width="250" fill="none" pointer-events="all" />
</svg>
@ccprog

This comment has been minimized.

Copy link
Owner Author

@ccprog ccprog commented Aug 30, 2017

path #ar (the arrow) is referenced twice:

  • in a directly rendered <use> element. In Firefox 55, the animateTransform animation is not shown.
  • as a <use> element inside a <mask>. In Firefox 55, the animateTransform animation is visible on the masked element (stenciled into the red shape).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment