仅在悬停（鼠标悬停）svg 或 css 解决方案时重新启动 svg 动画
restart svg animation on hover (mouseover) svg or css solutions only
这是我的 svg，眼睛每 12 秒闪烁一次，但我希望用户能够在任何鼠标悬停事件上触发它。所以在悬停时重新启动动画。
我试过添加
begin="mouseover;...." 到我的 svg 动画标签，但它只触发那个单独的动画，而不是所有 6 个动画，我不希望它在用户悬停在一个小形状上时触发，而是在整个 svg.
我不喜欢 javascript，因为它会减慢加载时间。我希望得到一些帮助，它会帮助那些不耐烦的人再次观看动画。
<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>
在 SMIL 中，您可以使用事件 mouseover。因为你想让眼睛同时眨眼，所以我把眼睛放在一个组中，我的目标是这个组：
begin="2s; theGroup.mouseover; whiteEye2.end+12s;"`
但是，在两眼之间移动鼠标时，您不会眨眼。为了解决这个问题，我在眼睛后面添加了一个矩形：
<rect x="18" y="12" width="84" height="36" fill="none" pointer-events="all"/>
矩形没有填充，所以你需要添加pointer-events="all"以使其对鼠标敏感。
<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>
这是我的 svg，眼睛每 12 秒闪烁一次，但我希望用户能够在任何鼠标悬停事件上触发它。所以在悬停时重新启动动画。
我试过添加 begin="mouseover;...." 到我的 svg 动画标签，但它只触发那个单独的动画，而不是所有 6 个动画，我不希望它在用户悬停在一个小形状上时触发，而是在整个 svg.
我不喜欢 javascript，因为它会减慢加载时间。我希望得到一些帮助，它会帮助那些不耐烦的人再次观看动画。
<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>
在 SMIL 中，您可以使用事件 mouseover。因为你想让眼睛同时眨眼，所以我把眼睛放在一个组中，我的目标是这个组：
begin="2s; theGroup.mouseover; whiteEye2.end+12s;"`
但是，在两眼之间移动鼠标时，您不会眨眼。为了解决这个问题，我在眼睛后面添加了一个矩形：
<rect x="18" y="12" width="84" height="36" fill="none" pointer-events="all"/>
矩形没有填充，所以你需要添加pointer-events="all"以使其对鼠标敏感。
<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>