如何解决如何为 SVG SMIL 动画添加缓动？
我一直在试验用于 SVG 动画的 SMIL 方法，但是我在添加缓动方面遇到了麻烦。
这是没有缓动的工作动画：
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" width="100%"
height="100%">
<g id="crosshair_01" transform="translate(-15 -15)">
<line x1="25" y1="15" x2="5" y2="15"
style="fill:none;stroke:#005a84;stroke-miterlimit:10;stroke-width:2px" />
<line x1="15" y1="5" x2="15" y2="25"
style="fill:none;stroke:#005a84;stroke-miterlimit:10;stroke-width:2px" />
</g>
<path stroke-dasharray="1000" stroke="#58595B" pathLength="1000" fill="none" stroke-linejoin="round"
stroke-dashoffset="1000" stroke-linecap="round" marker-start="url(#bm)" stroke-width="2" id="polygon_01"
d="M 72.1 13.4 46.3 40.6 4.9 55.3 33 86.6 74.3 72.6 95.1 28.3 72.1 13.4" marker-end="url(#bm)" />
<animate attributeName="stroke-dashoffset" fill="freeze" begin="0s; hidepolygon_01.end" from="1000"
id="revealpolygon_01" dur="2s" xlink:href="#polygon_01" to="2000" />
<animate attributeName="stroke-dashoffset" fill="freeze" begin="revealpolygon_01.end" from="0"
id="hidepolygon_01" dur="2s" xlink:href="#polygon_01" to="1000" />
<animateMotion xlink:href="#crosshair_01" begin="0s; hidepolygon_01.end" dur="2s" repeatCount="indefinite"
additive="replace" calcMode="linear" keyTimes="0 ; 1" keyPoints="1 ; 0">
<mpath xlink:href="#polygon_01" />
</animateMotion>
</svg>
</div>这里我尝试使用 keyTimes 和 keySplines 添加缓动：
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" width="100%"
height="100%">
<g id="crosshair_01" transform="translate(-15 -15)">
<line x1="25" y1="15" x2="5" y2="15"
style="fill:none;stroke:#005a84;stroke-miterlimit:10;stroke-width:2px" />
<line x1="15" y1="5" x2="15" y2="25"
style="fill:none;stroke:#005a84;stroke-miterlimit:10;stroke-width:2px" />
</g>
<path stroke-dasharray="1000" stroke="#58595B" pathLength="1000" fill="none" stroke-linejoin="round"
stroke-dashoffset="1000" stroke-linecap="round" marker-start="url(#bm)" stroke-width="2" id="polygon_01"
d="M 72.1 13.4 46.3 40.6 4.9 55.3 33 86.6 74.3 72.6 95.1 28.3 72.1 13.4" marker-end="url(#bm)" />
<animate attributeName="stroke-dashoffset" fill="freeze" begin="0s; hidepolygon_01.end" from="1000"
id="revealpolygon_01" dur="2s" xlink:href="#polygon_01" to="2000" calcMode="spline" values="1000; 1332; 1498; 1664; 1830; 2000;" keyTimes="0; 0.16; 0.33; 0.49; 0.66; 0.83; 1;"
keySplines="0.42 0 1 1;
0.42 0 1 1;
0.42 0 1 1;
0.42 0 1 1;
0.42 0 1 1;
0.42 0 1 1;" />
<animate attributeName="stroke-dashoffset" fill="freeze" begin="revealpolygon_01.end" from="0"
id="hidepolygon_01" dur="2s" xlink:href="#polygon_01" to="1000" />
<animateMotion xlink:href="#crosshair_01" begin="0s; hidepolygon_01.end" dur="2s" repeatCount="indefinite"
additive="replace" calcMode="linear" keyTimes="0 ; 1" keyPoints="1 ; 0">
<mpath xlink:href="#polygon_01" />
</animateMotion>
</svg>
</div>出于某种原因，它使路径消失。有人有什么建议吗？
到目前为止，我只尝试为第一个动画添加缓动，我显然希望在复制到其他动画之前让它工作。
解决方法
您的 values 属性中有错误的条目数。
对于 n 个样条，您需要：
-
n+1
values个条目 -
n+1
keyTimes个条目 -
n
keySplines个条目
您的 values 属性中只有六个条目。你需要七个。
此外，您在列表中使用的尾随分号在技术上是非法的。但我认为浏览器都对此表示宽容。 更正：某些浏览器是。
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" width="100%"
height="100%">
<g id="crosshair_01" transform="translate(-15 -15)">
<line x1="25" y1="15" x2="5" y2="15"
style="fill:none;stroke:#005a84;stroke-miterlimit:10;stroke-width:2px" />
<line x1="15" y1="5" x2="15" y2="25"
style="fill:none;stroke:#005a84;stroke-miterlimit:10;stroke-width:2px" />
</g>
<path stroke-dasharray="1000" stroke="#58595B" pathLength="1000" fill="none" stroke-linejoin="round"
stroke-dashoffset="1000" stroke-linecap="round" marker-start="url(#bm)" stroke-width="2" id="polygon_01"
d="M 72.1 13.4 46.3 40.6 4.9 55.3 33 86.6 74.3 72.6 95.1 28.3 72.1 13.4" marker-end="url(#bm)" />
<animate attributeName="stroke-dashoffset" fill="freeze" begin="0s; hidePolygon_01.end"
id="revealPolygon_01" dur="2s" xlink:href="#polygon_01" calcMode="spline"
values="1000; 1167; 1333; 1500; 1667; 1833; 2000"
keyTimes="0; 0.16; 0.33; 0.49; 0.66; 0.83; 1"
keySplines="0.42 0 1 1; 0.42 0 1 1; 0.42 0 1 1; 0.42 0 1 1; 0.42 0 1 1; 0.42 0 1 1" />
/>
<animate attributeName="stroke-dashoffset" fill="freeze" begin="revealPolygon_01.end" from="0"
id="hidePolygon_01" dur="2s" xlink:href="#polygon_01" to="1000" />
<animateMotion xlink:href="#crosshair_01" begin="0s; hidePolygon_01.end" dur="2s" repeatCount="indefinite"
additive="replace" calcMode="linear" keyTimes="0 ; 1" keyPoints="1 ; 0">
<mpath xlink:href="#polygon_01" />
</animateMotion>
</svg>
</div>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
