a strange animation behavior

hover.svg

<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>

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).