SVG Animation with begin attribute and dynamic Liquid Issue (SVG Knowledge Needed)

Technical Q&A
1

Hello everyone, we’re facing an unusual problem concerning SVG animation, specifically involving the begin attribute and Liquid.

Our goal is to initiate the animation when the mouse event mouseenter is triggered on the rect SVG element, as demonstrated in the following code.

<svg>
 <defs>
  <pattern id="button-pattern{{ section.id }}" x="0" y="26" width="100%" height="43" patternUnits="userSpaceOnUse">
    <text x="0" y="41">{{ section.settings.button_text }}</text>
    <animateTransform 
    attributeType="xml"
    attributeName="patternTransform"
    type="translate" 
    from="0" 
    to="-5000" 
    begin="style_3_btn_svg.mouseenter"
    dur="20s" 
    repeatCount="indefinite"/>
   </pattern>
  </defs>
  <rect id="style_3_btn_svg" x="0" y="0" width="100%" height="100%" fill="url(#button-pattern{{ section.id }})"/>
</svg>

Consequently, the animation initiates upon the mouseenter event triggering on the rect element with the ID of style_3_btn_svg, and it functions flawlessly!

Now, consider a scenario where we need to dynamically set the rect element’s ID uniquely for each rendered section based on its section ID. The code would appear as follows.

<svg>
  <defs>
    <pattern id="button-pattern{{ section.id }}" x="0" y="26" width="100%" height="43" patternUnits="userSpaceOnUse">
    <text x="0" y="41">{{ section.settings.button_text }}</text>
    <animateTransform 
    attributeType="xml"
    attributeName="patternTransform"
    type="translate" 
    from="0" 
    to="-5000" 
    begin="style_3_btn_svg{{ section.id }}.mouseenter"
    dur="20s" 
    repeatCount="indefinite"/>
    </pattern>
  </defs>
  <rect id="style_3_btn_svg{{ section.id }}" x="0" y="0" width="100%" height="100%" fill="url(#button-pattern{{ section.id }})"/>
</svg>

Unfortunately, this code doesn’t seem to be functioning as expected. Your assistance on this matter would be greatly appreciated. Thank you!