This is my svg, the eyes blink every 12 seconds, but I want the user to be able to trigger that on any mouseover event. So restart the animation on hover.
I've tried adding begin="mouseover;...." to my svg animate tags, but it just triggers that lone animation, not all 6 animations, and I don't want it to trigger when the user hovers over a small shape, but rather over the whole svg.
I'm not keen on javascript because it slows the load time. I'd love some assistance, it'll help those impatient to view the animation again.
<svg width="120.03" height="120.4" viewBox="0 0 120.03 120.399" xmlns="http://www.w3.org/2000/svg" style="display:block; margin:auto; margin-top: -110px;">
<path d="M13.936 69.536s-.904.55-1.48 1.279-1.667 3.216-1.667 3.216-1.105-7.03-1.199-10.04c-.093-3.01.45-7.942.45-7.942l-8.691.6s1.9-6.464 3.147-8.991c1.245-2.527 3.596-5.994 3.596-5.994s-2.52-.16-3.896.15S0 43.612 0 43.612c2.675-9.279 6.027-16.872 10.94-22.178C18.673 13.326 34.6-.32 57.991.004s33.594 5.326 44.206 13.637c10.612 8.311 17.832 29.67 17.832 29.67l-7.942-2.098 6.743 14.685-8.99.6-.75 15.883-2.847-3.296s-.488 10.012-1.649 13.936c-1.16 3.924-4.645 9.44-4.645 9.44l-1.349-3.596s-2.494 7.072-5.095 9.59c-2.118 2.051-5.239 2.718-7.942 3.896-7.797 3.4-13.699 8.929-23.826 9.141s-27.169-6.132-33.417-11.239c-6.248-5.106-6.593-11.389-6.593-11.389l-1.199 5.245s-4.679-9.466-5.694-13.636-.9-10.939-.9-10.939z" fill="#45332c" fill-rule="evenodd"/><path d="M19.331 13.043s-3.966-3.487-4.945-5.844c-.904-2.176-.6-7.043-.6-7.043s7.166 3.172 13.17 5.076c3 .953 7.174.818 12.08 1.929 4.907 1.11 10.865 3.784 10.865 3.784L48.85 6.3l6.894 5.544 3.896-9.29 3.596 9.74 7.643-5.695-1.499 4.646s6.731-2.78 10.639-3.747c3.908-.965 8.456-.707 12.737-1.873 4.281-1.165 12.737-5.17 12.737-5.17s-.35 4.496-1.199 6.594c-.849 2.098-3.896 5.994-3.896 5.994s6.142 7.34 7.343 12.438c1.2 5.097 1.137 11.9-1.199 16.933s-6.847 9.09-11.688 11.389c-4.842 2.298-10.806 2.824-15.734 1.798-4.928-1.026-9.334-4.78-12.438-7.193s-6.444-6.593-6.444-6.593-4.605 5.051-7.942 7.492c-3.336 2.442-7.178 5.841-12.138 6.744-4.96.902-11.333.372-16.184-2.398-4.85-2.77-9.06-8.213-10.789-13.337s-.665-10.657.45-15.285 5.694-11.988 5.694-11.988z" fill="#785647" fill-rule="evenodd"/>
<ellipse id="yellow" cx="35.443" cy="30.654" rx="17.099" ry="17.066" fill="#f9c802" stroke="#000" stroke-dasharray="0.73361021, 17.606645" stroke-linejoin="round" stroke-opacity=".436" stroke-width=".734"/>
<ellipse id="black" cx="35.664" cy="30.051" rx="8.848" ry="8.848" fill="#302c3b" stroke="#000" stroke-dasharray="0.75924348, 18.22184352" stroke-linejoin="round" stroke-opacity=".436" stroke-width=".759"/>
<ellipse id="white" cx="28.696" cy="24.431" rx="2.847" ry="4.196" fill="#fff" stroke="#000" stroke-dasharray="0.62362205, 14.96692913" stroke-linejoin="round" stroke-opacity=".436" stroke-width=".624"/>
<ellipse id="yellow2" cx="84.029" cy="29.938" rx="17.066" ry="17.066" fill="#f9c802" stroke="#000" stroke-dasharray="0.73219484, 17.57267607" stroke-linejoin="round" stroke-opacity=".436" stroke-width=".732"/>
<ellipse id="black2" cx="84.216" cy="29.976" rx="8.848" ry="8.848" fill="#302c3b" stroke="#000" stroke-dasharray="0.75924348, 18.22184352" stroke-linejoin="round" stroke-opacity=".436" stroke-width=".759"/>
<ellipse id="white2" cx="77.248" cy="24.356" rx="2.847" ry="4.196" fill="#fff" stroke="#000" stroke-dasharray="0.62362205, 14.96692913" stroke-linejoin="round" stroke-opacity=".436" stroke-width=".624"/>
<path d="M34.232 104.03l-.344 6.305 3.284 8.9 3.391-6.781 2.12 7.629 3.92-7.735 2.119 6.04 2.86-6.146 1.167-7.312zM65.57 105.35l5.616 13.563 2.437-6.676 2.437 8.16 3.709-8.054 2.33 6.676 3.71-9.007-1.166-6.781z" fill="#f59e01" fill-rule="evenodd"/><path d="M21.064 60.248s-1.255 4.953-1.199 7.642c.056 2.69 1.649 8.242 1.649 8.242l1.648-3.896s-.085 7.66 1.086 11.09c1.172 3.427 5.058 8.091 5.058 8.091l.15-4.196s.463 3.721 1.948 5.844 7.343 5.845 7.343 5.845l-7.043 7.792 5.094.6-2.547 2.397s4.28-.363 5.994-1.349c1.715-.986 3.896-4.196 3.896-4.196s1.782 3.081 3.121 3.966c1.34.885 4.664.917 4.664.917s-.704-3.049-.442-3.234c.32-.227 2.997 1.798 2.997 1.798l-.45-2.098 11.538-.15-.45 2.847 3.783-.837-.869 2.111s4.14-.577 4.938-1.413c.797-.835 3.537-3.607 3.537-3.607s3.022 3.412 4.646 4.196c1.623.784 4.495.75 4.495.75l-2.547-2.698 6.144.45s-3.181-3.102-4.346-4.646-2.697-4.495-2.697-4.495 5.457-2.504 6.893-4.496 1.648-6.294 1.648-6.294l1.218 4.566s3.437-5.57 4.327-7.862c.89-2.293.717-3.393.899-5.245s.15-5.844.15-5.844l1.798 2.697s1.37-7.276 1.498-9.89c.128-2.615-.3-5.694-.3-5.694l-40.758 4.345z" fill="#785647" fill-rule="evenodd"/><path d="M36.563 61.997l-5.006 6.939s4.14 1.15 6.252.953c2.112-.197 6.04-2.119 6.04-2.119s-1.236 3.934-2.331 5.404c-1.096 1.47-3.921 3.285-3.921 3.285s4.698.717 6.993.212c2.296-.505 6.358-3.179 6.358-3.179l-1.59 6.888 7.63-8.795 3.062 16.27 3.19-16.482 6.463 8.795-.636-7.206s2.438 2.334 4.45 3.073 7.418.742 7.418.742l-5.26-8.59s2.796 1.16 4.795 1.35c2 .19 7.043-.6 7.043-.6l-4.645-7.193s-8.02-.125-11.913-.899c-1.947-.387-6.65-2.862-8.88-3.889s-3.15-.13-3.15-.13-6.802 3.06-10.823 4.146c-4.021 1.085-11.539 1.025-11.539 1.025z" fill="#ffe8bb" fill-rule="evenodd"/><path d="M53.047 37.768s4.706-3.805 7.343-3.746c2.637.059 6.593 3.746 6.593 3.746S63.06 66.979 60.54 66.989c-3.12.012-7.492-29.221-7.492-29.221z" fill="#f59e01" fill-rule="evenodd"/>
<animate
id = "yellowEye"
xlink:href="#yellow"
attributeName="ry"
values="17.066; 0; 17.066"
keyTimes="0; 0.5; 1"
dur="0.25s"
fill="freeze"
begin="2s;yellowEye.end+12s;"
/>
<animate
id = "yellowEye2"
xlink:href="#yellow2"
attributeName="ry"
values="17.066; 0; 17.066"
keyTimes="0; 0.5; 1"
dur="0.25s"
fill="freeze"
begin="2s;yellowEye2.end+12s;"
/>
<animate
id = "blackEye"
xlink:href="#black"
attributeName="ry"
values="8.848; 8.848; 0; 0; 8.848; 8.848"
keyTimes="0; 0.23; 0.48; 0.51; 0.77; 1"
dur="0.25s"
fill="freeze"
begin="2s;blackEye.end+12s;"
/>
<animate
id = "blackEye2"
xlink:href="#black2"
attributeName="ry"
values="8.848; 8.848; 0; 0; 8.848; 8.848"
keyTimes="0; 0.23; 0.48; 0.51; 0.77; 1"
dur="0.25s"
fill="freeze"
begin="2s;blackEye2.end+12s;"
/>
<animate
id = "whiteEye"
xlink:href="#white"
attributeName="ry"
values="4.196; 0; 0; 4.196"
keyTimes="0; 0.27; 0.7; 1"
dur="0.25s"
fill="freeze"
begin="2s;whiteEye.end+12s;"
/>
<animate
id = "whiteEye2"
xlink:href="#white2"
attributeName="ry"
values="4.196; 0; 0; 4.196"
keyTimes="0; 0.27; 0.7; 1"
dur="0.25s"
fill="freeze"
begin="2s;whiteEye2.end+12s;"
/>
</svg>In SMIL you can use the event mouseover. Since you want the eyes to blink simultaneously I've putted the eyes in a group and I'm targeting the group:
begin="2s; theGroup.mouseover; whiteEye2.end+12s;"`
However you won't get a blink when mousing between the eyes. To fix this I'm adding to the group a rect behind the eyes:
<rect x="18" y="12" width="84" height="36" fill="none" pointer-events="all"/>
The rect has no fill so you need to add pointer-events="all" in order to make it sensitive to the mouse.
<svg width="120.03" height="120.4" viewBox="0 0 120.03 120.399" xmlns="http://www.w3.org/2000/svg" style="display:block; margin:auto;">
<g id="theGroup">
<rect x="18" y="12" width="84" height="36" fill="none" pointer-events="all"/>
<ellipse id="yellow" cx="35.443" cy="30.654" rx="17.099" ry="17.066" fill="#f9c802" stroke="#000" stroke-dasharray="0.73361021, 17.606645" stroke-linejoin="round" stroke-opacity=".436" stroke-width=".734" />
<ellipse id="black" cx="35.664" cy="30.051" rx="8.848" ry="8.848" fill="#302c3b" stroke="#000" stroke-dasharray="0.75924348, 18.22184352" stroke-linejoin="round" stroke-opacity=".436" stroke-width=".759" />
<ellipse id="white" cx="28.696" cy="24.431" rx="2.847" ry="4.196" fill="#fff" stroke="#000" stroke-dasharray="0.62362205, 14.96692913" stroke-linejoin="round" stroke-opacity=".436" stroke-width=".624" />
<ellipse id="yellow2" cx="84.029" cy="29.938" rx="17.066" ry="17.066" fill="#f9c802" stroke="#000" stroke-dasharray="0.73219484, 17.57267607" stroke-linejoin="round" stroke-opacity=".436" stroke-width=".732" />
<ellipse id="black2" cx="84.216" cy="29.976" rx="8.848" ry="8.848" fill="#302c3b" stroke="#000" stroke-dasharray="0.75924348, 18.22184352" stroke-linejoin="round" stroke-opacity=".436" stroke-width=".759" />
<ellipse id="white2" cx="77.248" cy="24.356" rx="2.847" ry="4.196" fill="#fff" stroke="#000" stroke-dasharray="0.62362205, 14.96692913" stroke-linejoin="round" stroke-opacity=".436" stroke-width=".624" />
<animate id="yellowEye" xlink:href="#yellow" attributeName="ry" values="17.066; 0; 17.066" keyTimes="0; 0.5; 1" dur="0.25s" fill="freeze" begin="2s; theGroup.mouseover; blackEye.end+12s;" />
<animate id="yellowEye2" xlink:href="#yellow2" attributeName="ry" values="17.066; 0; 17.066" keyTimes="0; 0.5; 1" dur="0.25s" fill="freeze" begin="2s; theGroup.mouseover; blackEye.end+12s;" />
<animate id="blackEye" xlink:href="#black" attributeName="ry" values="8.848; 8.848; 0; 0; 8.848; 8.848" keyTimes="0; 0.23; 0.48; 0.51; 0.77; 1" dur="0.25s" fill="freeze" begin="2s; theGroup.mouseover; blackEye.end+12s;" />
<animate id="blackEye2" xlink:href="#black2" attributeName="ry" values="8.848; 8.848; 0; 0; 8.848; 8.848" keyTimes="0; 0.23; 0.48; 0.51; 0.77; 1" dur="0.25s" fill="freeze" begin="2s; theGroup.mouseover; blackEye.end+12s;" />
<animate id="whiteEye" xlink:href="#white" attributeName="ry" values="4.196; 0; 0; 4.196" keyTimes="0; 0.27; 0.7; 1" dur="0.25s" fill="freeze" begin="2s; theGroup.mouseover; blackEye.end+12s;" />
<animate id="whiteEye2" xlink:href="#white2" attributeName="ry" values="4.196; 0; 0; 4.196" keyTimes="0; 0.27; 0.7; 1" dur="0.25s" fill="freeze" begin="2s; theGroup.mouseover; whiteEye2.end+12s;" />
</g>
</svg>