我试图让这个表情符号从鼠标开始皱眉，从空白的凝视开始，然后回到鼠标输出皱眉。
基本上有一个动画路径应用于重复持续时间为1，然后重置鼠标输出。我读了很多文章，但如果使用from和to animatetransform是最好的，那就很困惑了。
下面是我想要包含的动画的svg，没有外部CSS或Jquery。
提前致谢。
<svg width="189px" height="189px" viewBox="0 0 189 189" version="1.1">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill- rule="evenodd" sketch:type="MSPage">
<g id="unsatisfied-head" sketch:type="MSLayerGroup">
<g id="g10" transform="translate(94.500000, 94.655027) scale(1, -1) translate(-94.500000, -94.655027) translate(0.000000, 0.655027)">
<g id="g12">
<g id="unsatified-head-box">
<mask id="mask-2" sketch:name="path18" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="path18"></g>
<g id="head-container">
<g transform="translate(9.904041, 9.879125)">
<g id="head-bg">
<path d="M168.368696,83.9725634 C168.368696,37.5950106 130.678868,0 84.1843479,0 C37.6947798,0 0,37.5950106 0,83.9725634 C0,130.345177 37.6947798,167.945127 84.1843479,167.945127 C130.678868,167.945127 168.368696,130.345177 168.368696,83.9725634" id="path22" fill="#FFCC4D" sketch:type="MSShapeGroup"></path>
</g>
<g id="left-eye" transform="translate(44.568184, 88.912126)">
<path d="M0,19.7582502 C0,19.7582502 0,29.6373753 9.90404093,29.6373753 C19.8080819,29.6373753 19.8080819,19.7582502 19.8080819,19.7582502 L19.8080819,9.8791251 C19.8080819,9.8791251 19.8080819,0 9.90404093,0 C0,0 0,9.8791251 0,9.8791251 L0,19.7582502 L0,19.7582502 Z" id="path26" fill="#664500" sketch:type="MSShapeGroup"></path>
</g>
<g id="right-eye" transform="translate(103.992430, 88.912126)">
<path d="M0,19.7582502 C0,19.7582502 0,29.6373753 9.90404093,29.6373753 C19.8080819,29.6373753 19.8080819,19.7582502 19.8080819,19.7582502 L19.8080819,9.8791251 C19.8080819,9.8791251 19.8080819,0 9.90404093,0 C0,0 0,9.8791251 0,9.8791251 L0,19.7582502 L0,19.7582502 Z" id="path30" fill="#664500" sketch:type="MSShapeGroup"></path>
</g>
<g id="mouth" transform="translate(36.967823, 31.754472)">
<path d="M74.280307,0 L4.95202046,0 C2.21850517,0 0,2.20798446 0,4.93956255 C0,7.67114064 2.21850517,9.8791251 4.95202046,9.8791251 L74.280307,9.8791251 C77.0187743,9.8791251 79.2323274,7.67114064 79.2323274,4.93956255 C79.2323274,2.20798446 77.0187743,0 74.280307,0" id="path34" fill="#664500" sketch:type="MSShapeGroup"></path>
<animate attributeType="XML" dur="10s" begin="mouseoff" attributeName="d" restart="whenNotActive" repeatCount="1" fill="freeze"
from="M74.280307,0 L4.95202046,0 C2.21850517,0 0,2.20798446 0,4.93956255 C0,7.67114064 2.21850517,9.8791251 4.95202046,9.8791251 L74.280307,9.8791251 C77.0187743,9.8791251 79.2323274,7.67114064 79.2323274,4.93956255 C79.2323274,2.20798446 77.0187743,0 74.280307,0"
to="M0.990404093,0.98791251 C1.87186374,0.192642939 3.18910118,0.143247314 4.13493709,0.844665196 C4.32806589,0.98791251 23.5567613,15.1693966 47.2175151,15.1693966 C70.8188447,15.1693966 90.1119164,0.98791251 90.3000932,0.844665196 C91.2459291,0.143247314 92.5631665,0.202522065 93.4446262,0.98791251 C94.3211338,1.77824252 94.5192146,3.08228703 93.9101161,4.08995779 C93.2713054,5.15196374 77.9794662,29.9880842 47.2175151,29.9880842 C16.455564,29.9880842 1.15877279,5.15196374 0.524914169,4.08995779 C-0.0841843479,3.07734747 0.10894445,1.77824252 0.990404093,0.98791251"/>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
答案 0 :(得分：0)
有一些错误：
您的<animate>应位于<path>和</path>标记内，或者您必须使用其xlink:href属性
如果您真的想要看到动画形状，则必须使用原始形状具有相同点数的目标形状
mouseoff事件不存在，也许您想要mouseup
<svg width="189px" height="189px" viewBox="0 0 189 189" version="1.1">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill- rule="evenodd" sketch:type="MSPage">
<g id="unsatisfied-head" sketch:type="MSLayerGroup">
<g id="g10" transform="translate(94.500000, 94.655027) scale(1, -1) translate(-94.500000, -94.655027) translate(0.000000, 0.655027)">
<g id="g12">
<g id="unsatified-head-box">
<mask id="mask-2" sketch:name="path18" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="path18"></g>
<g id="head-container">
<g transform="translate(9.904041, 9.879125)">
<g id="head-bg">
<path d="M168.368696,83.9725634 C168.368696,37.5950106 130.678868,0 84.1843479,0 C37.6947798,0 0,37.5950106 0,83.9725634 C0,130.345177 37.6947798,167.945127 84.1843479,167.945127 C130.678868,167.945127 168.368696,130.345177 168.368696,83.9725634" id="path22"
fill="#FFCC4D" sketch:type="MSShapeGroup"></path>
</g>
<g id="left-eye" transform="translate(44.568184, 88.912126)">
<path d="M0,19.7582502 C0,19.7582502 0,29.6373753 9.90404093,29.6373753 C19.8080819,29.6373753 19.8080819,19.7582502 19.8080819,19.7582502 L19.8080819,9.8791251 C19.8080819,9.8791251 19.8080819,0 9.90404093,0 C0,0 0,9.8791251 0,9.8791251 L0,19.7582502 L0,19.7582502 Z"
id="path26" fill="#664500" sketch:type="MSShapeGroup"></path>
</g>
<g id="right-eye" transform="translate(103.992430, 88.912126)">
<path d="M0,19.7582502 C0,19.7582502 0,29.6373753 9.90404093,29.6373753 C19.8080819,29.6373753 19.8080819,19.7582502 19.8080819,19.7582502 L19.8080819,9.8791251 C19.8080819,9.8791251 19.8080819,0 9.90404093,0 C0,0 0,9.8791251 0,9.8791251 L0,19.7582502 L0,19.7582502 Z"
id="path30" fill="#664500" sketch:type="MSShapeGroup"></path>
</g>
<g id="mouth" transform="translate(36.967823, 31.754472)">
<path id="path34" fill="#664500" d="M0,4.9C0.4,0.9,3.6-0.1,5,0c0.2,0.1,19.8,0,43.5,0C72,0,67.2,0,75.1,0c0.7-0.1,4.2,1.4,4.2,4.9c0,2.5-2.3,4.9-4.4,4.9c-2.3,0-2.3,0-33.1,0S8.2,10,5,9.9C3.6,9.9-2.4,9,0.9,1.3">
<animate attributeType="XML" dur="2s" begin="mouseup" attributeName="d" repeatCount="1" fill="freeze" to="M1,1c0.9-0.8,2.2-0.8,3.1-0.1C4.3,1,23.6,15.2,47.2,15.2C70.8,15.2,90.1,1,90.3,0.8c0.9-0.7,2.3-0.6,3.1,0.1c0.9,0.8,1.1,2.1,0.5,3.1C93.3,5.2,78,30,47.2,30S1.2,5.2,0.5,4.1C-0.1,3.1,0.1,1.8,1,1"
/>
</path>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>