是否可以<animateMotion>在组上使用 SVG 标签？

Question

我遇到了最困难的时候沿着路径动画一组svg元素。我使用GSAP将元素组设置为像单元动画一样使元素"爬行"。以下是使用GSAP的React环境中的代码:

SVG部分:

<g id="ecosphere-pond-u-ostracod-path">
<path id="ecosphere-pond-u-path-of-the-ostracod" d="m165.3 244.8-1.6.5-.9 1.5-1.1 1.3-1.5.6-1.7-.1-1.6.7-.9 1.2-.6.6-1.3-.2-.9-.7h-1.1l-1.5.6-1.1.5-2.2 2.2-2.9 2.3-2.3.7-2.4.4-1.5-.7-1.2-.8-1.3.6-.7-.7-1.8 1.2-1.3 1.2-1.5.5-1.5.6-.8-.4-.6-.6-.5.4-.3.9.1.4-1.2.1-.5-.2-1-.6-.9-.5h-.6l-.8.7-.7.7-1.1 1.4-1.2.5-2 .8-2 .3-3.3.8-2.7-.8.1-.1-1.3-.8-.9-1-.8-.5h-.9l-.6.9-1 .5-.9-.5-1-.5-.9.3-.8.6-1.1 1-2.2.8-2 .8-1.8.1-1-.7-1.2-.7-1 .4-.7 1-1 .5-.9.5-1.4-.4-.5-.3-1-1.4-1-.6-1-.9-1-.5-1-.6-.7-.1-.7.3-.8-.2-.7-.2-.2-.4-1.2-.4-.3-.5-1.2.2-2.1 1.3-1 .6c-.2.4-2.2.7-2.2.7l-2.6.1-2.5-.2-.8-.4-1.3-.5-.9-.1-2 .8-2.2 1.1-1.9.5c-.3.1-1.5 2-1.5 2l-1.7-2.1-1.9-.8h-1.8l-1.1-.3-1.2.7-2.3 9.3 53.7 1.4 35.1.2 34.3-.1 1.4-27.3Z" fill="none" stroke="#ffc61c" strokeWidth=".3"/>
</g>
<g id="ecosphere-pond-u-ostracod-floorcrawler-frames" transform="rotate(-15.4 858.4 -279.9) scale(.2699)">
<animateMotion dur="6s" repeatCount="indefinite" rotate="auto" >
<mpath xlinkHref="#ecosphere-pond-u-ostracod-path"/>
</animateMotion>
<g id="ecosphere-pond-u-ostracod-floorcrawler-frame-1">
<g id="ecosphere-pond-u-ostrapod-group-1">
<path id="ecosphere-pond-u-path8704" d="m199.1 208.4-2.2-1.4-3.5-.5-3.5 1.6 3.6-.8 2.5.1 2.9 1.7Z" fill="#cc6f4a" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path8700" d="m198.3 208.6-2.4-1.8-2.8 1.7-1.2 3.3 2-2.6 1.9-1.4 2.6 1.8Z" fill="#d88c70" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path8702" d="m198.9 210.5-2.9-.6-2.6 1.9-1.7 1.8.9-2.3 3.2-2.2 3.2.3Z" fill="#dea48b" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path8698" d="M198.5 210.8c.6.9 1.7 1.4 2.7 1.9 1.1.5 2.3 1.3 3.5 1 1.1-.3 2.2-1.2 2.5-2.3.3-1-.3-2-.8-2.9-.4-.7-1.1-1.3-1.9-1.7s-1.7-.7-2.6-.6c-1.1.1-2.4.4-3.2 1.2-.4.4-.5 1-.5 1.6s0 1.3.3 1.8Z" fill="url(#ecosphere-pond-u-path8698-fill)" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path8706" d="M201 207.4s-.8-1.9-.6-2.9c.2-.8.7-1.6 1.4-2 .3-.2 1-.2 1-.2" fill="none" stroke="#d78e71" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path8708" d="M200.2 208.7s-.7-2.4-1.4-3.4c-.3-.4-.6-1.2-1-1-.5.3.2 1.8.2 1.8" fill="none" stroke="#d78e71" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path24400" d="M201.3 210.2h1.3-.9l.1.1.5.5h.1s0 0 0 0c-.1-.1-.3-.3-.3-.5l-.1-.3.1-.4.1-.3v.1c-.4.2-.4.2-.5.6l-.1.1.2-.3c1.2-.8.6-.6 1.7-.8 0 0 .1 0 0 0H203.2h.4l.2.1-.1-.1-.4-.2c-.1-.2-.2-.2-.3-.2l-.1-.1s-.1-.1-.1 0h.2l.3.4.3.4v.8l-.1.1-.1.1v-.1h.1l.2-.4.1-.2c-1-.7-2.1-1.6-3.2-2.2-.2-.1-.3.2-.4.3.1-.1.2-.3.4-.3 1.4-.6 2.2-.6 3.3 1 .3.3 0 .9-.2 1.3l-.5.5c.1 0 .2-.1.1-.2-.1-.4-1-1.1-1.1-1.2l-.2-.2v0l-1.1-.7a.8.8 0 0 1-.4-.2l.1-.3c-.1-.2-.2-.6-.6.6-.2.4-.5 1-.2 1.4 1 1.5 1.9 1.5 3.3.9l.4-.2-.3.2-3.2-2.3c-.1 0 0-.1 0-.1s0 0 0 0 0 0 0 0l-.1.1c-.3.4-.6.5-.7 1-.3.3-.3.8-.1 1.2l.3.7.6.6.8.4.3.1.1.1-.1-.1-.1-.1s0 0 0 0l.4.2c.4.3.4.2 1 .4h1.8l1.1-.7.3-.5h.1-.1l-.1.1c.2-.1.3-.4.4-.6l.2-.6c0-.3 0-.6-.2-1-.1-.2-.3-.6-.6-.8l-.1-.1-.4-.3s0 0 0 0l.1.2-.1-.1-.7-.3-.4-.3-1-.2-.3.1h-.3l-.6.1-.1.1-.1 2.6Z" paintOrder="markers stroke fill" fill="#d78e71" stroke="#d78e71" strokeWidth=".2" strokeLinecap="round" strokeLinejoin="bevel"/>
</g>
</g>
<g id="ecosphere-pond-u-ostracod-floorcrawler-frame-2">
<g id="ecosphere-pond-u-ostrapod-group-2">
<path id="ecosphere-pond-u-path32356" d="m199.1 208.4-2.2-1-3.2.4-2.4 2.6 2.5-1.8 2.7-.5 2.4 1Z" fill="#cc6f4a" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path32358" d="m198.3 208.6-2.4-.9-2.7 1.3.5 3.2.3-2.5 1.8-1 2.6.9Z" fill="#d88c70" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path32360" d="m198.9 210.5-2.9-.6-2.4 1.4-.8 2.2.2-2.5 2.8-1.9 3.2.3Z" fill="#dea48b" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path32362" d="M198.5 210.8c.6.9 1.7 1.4 2.7 1.9 1.1.5 2.3 1.3 3.5 1 1.1-.3 2.2-1.2 2.5-2.3.3-1-.3-2-.8-2.9-.4-.7-1.1-1.3-1.9-1.7s-1.7-.7-2.6-.6c-1.1.1-2.4.4-3.2 1.2-.4.4-.5 1-.5 1.6s0 1.3.3 1.8Z" fill="url(#ecosphere-pond-u-path32362-fill)" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path32364" d="M201 207.4s-.8-1.9-.6-2.9c.2-.8.4-1 1.1-1.3.7-.2 1.1 1 1.1 1" fill="none" stroke="#d78e71" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path32366" d="M200.2 208.7s-.3-1.8-.9-2.9c-.6-1-.8-1.1-1.2-.9-.5.3-.3 2.1-.3 2.1" fill="none" stroke="#d78e71" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path32368" d="M201.3 210.2h1.3-.9l.1.1.5.5h.1s0 0 0 0c-.1-.1-.3-.3-.3-.5l-.1-.3.1-.4.1-.3v.1c-.4.2-.4.2-.5.6l-.1.1.2-.3c1.2-.8.6-.6 1.7-.8 0 0 .1 0 0 0H203.2h.4l.2.1-.1-.1-.4-.2c-.1-.2-.2-.2-.3-.2l-.1-.1s-.1-.1-.1 0h.2l.3.4.3.4v.8l-.1.1-.1.1v-.1h.1l.2-.4.1-.2c-1-.7-2.1-1.6-3.2-2.2-.2-.1-.3.2-.4.3.1-.1.2-.3.4-.3 1.4-.6 2.2-.6 3.3 1 .3.3 0 .9-.2 1.3l-.5.5c.1 0 .2-.1.1-.2-.1-.4-1-1.1-1.1-1.2l-.2-.2v0l-1.1-.7a.8.8 0 0 1-.4-.2l.1-.3c-.1-.2-.2-.6-.6.6-.2.4-.5 1-.2 1.4 1 1.5 1.9 1.5 3.3.9l.4-.2-.3.2-3.2-2.3c-.1 0 0-.1 0-.1s0 0 0 0 0 0 0 0l-.1.1c-.3.4-.6.5-.7 1-.3.3-.3.8-.1 1.2l.3.7.6.6.8.4.3.1.1.1-.1-.1-.1-.1s0 0 0 0l.4.2c.4.3.4.2 1 .4h1.8l1.1-.7.3-.5h.1-.1l-.1.1c.2-.1.3-.4.4-.6l.2-.6c0-.3 0-.6-.2-1-.1-.2-.3-.6-.6-.8l-.1-.1-.4-.3s0 0 0 0l.1.2-.1-.1-.7-.3-.4-.3-1-.2-.3.1h-.3l-.6.1-.1.1-.1 2.6Z" paintOrder="markers stroke fill" fill="#d78e71" stroke="#d78e71" strokeWidth=".2" strokeLinecap="round" strokeLinejoin="bevel"/>
</g>
</g>
<g id="ecosphere-pond-u-ostracod-floorcrawler-frame-3">
<g id="ecosphere-pond-u-ostrapod-group-3">
<path id="ecosphere-pond-u-path32378" d="m199.1 208.4-3.1-.9-2.9.9-1.1 2.6 1.7-2 2.4-.8 2.8.9Z" fill="#cc6f4a" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path32380" d="m198.3 208.6-2.9-.4-2.2 2-.3 2.2 1-1.7 1.6-1.6 2.9.5Z" fill="#d88c70" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path32382" d="m198.9 210.5-2.7-.4-1.3 1v2.4l-.6-2.7 1.6-1.4h3.1Z" fill="#dea48b" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path32384" d="M198.5 210.8c.6.9 1.7 1.4 2.7 1.9 1.1.5 2.3 1.3 3.5 1 1.1-.3 2.2-1.2 2.5-2.3.3-1-.3-2-.8-2.9-.4-.7-1.1-1.3-1.9-1.7s-1.7-.7-2.6-.6c-1.1.1-2.4.4-3.2 1.2-.4.4-.5 1-.5 1.6s0 1.3.3 1.8Z" fill="url(#ecosphere-pond-u-path32384-fill)" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path32386" d="M201 207.4s-.7-1.9-.7-2.9c0-.3-.1-.5.5-.9s1.1 1 1.1 1" fill="none" stroke="#d78e71" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path32388" d="M200.2 208.7s-.3-1.7-1.2-3.2c-.9-.1-.8.7-.8.7" fill="none" stroke="#d78e71" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path32390" d="M201.3 210.2h1.3-.9l.1.1.5.5h.1s0 0 0 0c-.1-.1-.3-.3-.3-.5l-.1-.3.1-.4.1-.3v.1c-.4.2-.4.2-.5.6l-.1.1.2-.3c1.2-.8.6-.6 1.7-.8 0 0 .1 0 0 0H203.2h.4l.2.1-.1-.1-.4-.2c-.1-.2-.2-.2-.3-.2l-.1-.1s-.1-.1-.1 0h.2l.3.4.3.4v.8l-.1.1-.1.1v-.1h.1l.2-.4.1-.2c-1-.7-2.1-1.6-3.2-2.2-.2-.1-.3.2-.4.3.1-.1.2-.3.4-.3 1.4-.6 2.2-.6 3.3 1 .3.3 0 .9-.2 1.3l-.5.5c.1 0 .2-.1.1-.2-.1-.4-1-1.1-1.1-1.2l-.2-.2v0l-1.1-.7a.8.8 0 0 1-.4-.2l.1-.3c-.1-.2-.2-.6-.6.6-.2.4-.5 1-.2 1.4 1 1.5 1.9 1.5 3.3.9l.4-.2-.3.2-3.2-2.3c-.1 0 0-.1 0-.1s0 0 0 0 0 0 0 0l-.1.1c-.3.4-.6.5-.7 1-.3.3-.3.8-.1 1.2l.3.7.6.6.8.4.3.1.1.1-.1-.1-.1-.1s0 0 0 0l.4.2c.4.3.4.2 1 .4h1.8l1.1-.7.3-.5h.1-.1l-.1.1c.2-.1.3-.4.4-.6l.2-.6c0-.3 0-.6-.2-1-.1-.2-.3-.6-.6-.8l-.1-.1-.4-.3s0 0 0 0l.1.2-.1-.1-.7-.3-.4-.3-1-.2-.3.1h-.3l-.6.1-.1.1-.1 2.6Z" paintOrder="markers stroke fill" fill="#d78e71" stroke="#d78e71" strokeWidth=".2" strokeLinecap="round" strokeLinejoin="bevel"/>
</g>
</g>
<g id="ecosphere-pond-u-ostracod-floorcrawler-frame-4">
<g id="ecosphere-pond-u-ostrapod-group-4">
<path id="ecosphere-pond-u-path36315" d="m199 208.3-3.2-.2-2.6 1.5-.5 2.7 1.2-2.3 2.2-1.3 2.9.3Z" fill="#cc6f4a" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path36317" d="m198.2 208.6-2.9.5-1.2 2.3.7 2.5.1-2.2.8-1.8 2.9-.3Z" fill="#d88c70" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path36319" d="m198.6 210.6-2.2-1.5-1.6.3-1.1 2.2.6-2.7 2.1-.6 2.8 1.3Z" fill="#dea48b" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path36321" d="M198.5 210.8c.6.9 1.7 1.4 2.7 1.9 1.1.5 2.3 1.3 3.5 1 1.1-.3 2.2-1.2 2.5-2.3.3-1-.3-2-.8-2.9-.4-.7-1.1-1.3-1.9-1.7s-1.7-.7-2.6-.6c-1.1.1-2.4.4-3.2 1.2-.4.4-.5 1-.5 1.6s0 1.3.3 1.8Z" fill="url(#ecosphere-pond-u-path36321-fill)" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path36323" d="M201 207.4s-.4-1.1-.4-2.1c0-.3.1-.4.7-.8s1.1 1 1.1 1" fill="none" stroke="#d78e71" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path36325" d="M200.2 208.7s-.2-.9-1.1-2.4c-.7-.1-.9.2-.9.2" fill="none" stroke="#d78e71" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path36327" d="M201.3 210.2h1.3-.9l.1.1.5.5h.1s0 0 0 0c-.1-.1-.3-.3-.3-.5l-.1-.3.1-.4.1-.3v.1c-.4.2-.4.2-.5.6l-.1.1.2-.3c1.2-.8.6-.6 1.7-.8 0 0 .1 0 0 0H203.2h.4l.2.1-.1-.1-.4-.2c-.1-.2-.2-.2-.3-.2l-.1-.1s-.1-.1-.1 0h.2l.3.4.3.4v.8l-.1.1-.1.1v-.1h.1l.2-.4.1-.2c-1-.7-2.1-1.6-3.2-2.2-.2-.1-.3.2-.4.3.1-.1.2-.3.4-.3 1.4-.6 2.2-.6 3.3 1 .3.3 0 .9-.2 1.3l-.5.5c.1 0 .2-.1.1-.2-.1-.4-1-1.1-1.1-1.2l-.2-.2v0l-1.1-.7a.8.8 0 0 1-.4-.2l.1-.3c-.1-.2-.2-.6-.6.6-.2.4-.5 1-.2 1.4 1 1.5 1.9 1.5 3.3.9l.4-.2-.3.2-3.2-2.3c-.1 0 0-.1 0-.1s0 0 0 0 0 0 0 0l-.1.1c-.3.4-.6.5-.7 1-.3.3-.3.8-.1 1.2l.3.7.6.6.8.4.3.1.1.1-.1-.1-.1-.1s0 0 0 0l.4.2c.4.3.4.2 1 .4h1.8l1.1-.7.3-.5h.1-.1l-.1.1c.2-.1.3-.4.4-.6l.2-.6c0-.3 0-.6-.2-1-.1-.2-.3-.6-.6-.8l-.1-.1-.4-.3s0 0 0 0l.1.2-.1-.1-.7-.3-.4-.3-1-.2-.3.1h-.3l-.6.1-.1.1-.1 2.6Z" paintOrder="markers stroke fill" fill="#d78e71" stroke="#d78e71" strokeWidth=".2" strokeLinecap="round" strokeLinejoin="bevel"/>
</g>
</g>
<g id="ecosphere-pond-u-ostracod-floorcrawler-frame-5">
<g id="ecosphere-pond-u-ostrapod-group-5">
<path id="ecosphere-pond-u-path11751" d="m199 208.3-3-.2-2.3 1.2-.1 3.1.6-2.7 1.9-1 2.9.3Z" fill="#cc6f4a" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path11753" d="m198.2 208.6-2.9 1-.7 1.9 1.1 2.2-.5-2.3.7-1.3 2.7-.5Z" fill="#d88c70" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path11755" d="m198.6 210.6-2.2-1.5-1.5-.1-2 1.4 1.6-2 1.9-.1 2.8 1.3Z" fill="#dea48b" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path11757" d="M198.5 210.8c.6.9 1.7 1.4 2.7 1.9 1.1.5 2.3 1.3 3.5 1 1.1-.3 2.2-1.2 2.5-2.3.3-1-.3-2-.8-2.9-.4-.7-1.1-1.3-1.9-1.7s-1.7-.7-2.6-.6c-1.1.1-2.4.4-3.2 1.2-.4.4-.5 1-.5 1.6s0 1.3.3 1.8Z" fill="url(#ecosphere-pond-u-path11757-fill)" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path11759" d="M201 207.4c-.6-1.2-.3-4 .7-1.7" fill="none" stroke="#d78e71" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path11761" d="M200.2 208.7c-.7-.8-1.3-3.1-1.9-2" fill="none" stroke="#d78e71" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path11763" d="M201.3 210.2h1.3-.9l.1.1.5.5h.1s0 0 0 0c-.1-.1-.3-.3-.3-.5l-.1-.3.1-.4.1-.3v.1c-.4.2-.4.2-.5.6l-.1.1.2-.3c1.2-.8.6-.6 1.7-.8 0 0 .1 0 0 0H203.2h.4l.2.1-.1-.1-.4-.2c-.1-.2-.2-.2-.3-.2l-.1-.1s-.1-.1-.1 0h.2l.3.4.3.4v.8l-.1.1-.1.1v-.1h.1l.2-.4.1-.2c-1-.7-2.1-1.6-3.2-2.2-.2-.1-.3.2-.4.3.1-.1.2-.3.4-.3 1.4-.6 2.2-.6 3.3 1 .3.3 0 .9-.2 1.3l-.5.5c.1 0 .2-.1.1-.2-.1-.4-1-1.1-1.1-1.2l-.2-.2v0l-1.1-.7a.8.8 0 0 1-.4-.2l.1-.3c-.1-.2-.2-.6-.6.6-.2.4-.5 1-.2 1.4 1 1.5 1.9 1.5 3.3.9l.4-.2-.3.2-3.2-2.3c-.1 0 0-.1 0-.1s0 0 0 0 0 0 0 0l-.1.1c-.3.4-.6.5-.7 1-.3.3-.3.8-.1 1.2l.3.7.6.6.8.4.3.1.1.1-.1-.1-.1-.1s0 0 0 0l.4.2c.4.3.4.2 1 .4h1.8l1.1-.7.3-.5h.1-.1l-.1.1c.2-.1.3-.4.4-.6l.2-.6c0-.3 0-.6-.2-1-.1-.2-.3-.6-.6-.8l-.1-.1-.4-.3s0 0 0 0l.1.2-.1-.1-.7-.3-.4-.3-1-.2-.3.1h-.3l-.6.1-.1.1-.1 2.6Z" paintOrder="markers stroke fill" fill="#d78e71" stroke="#d78e71" strokeWidth=".2" strokeLinecap="round" strokeLinejoin="bevel"/>
</g>
</g>
<g id="ecosphere-pond-u-ostracod-floorcrawler-frame-6">
<g id="ecosphere-pond-u-ostrapod-group-6">
<path id="ecosphere-pond-u-path15045" d="m198.9 208.3-2.9.6-2 1.7.8 3.1-.2-2.8 1.6-1.5 2.9-.4Z" fill="#cc6f4a" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path15047" d="m198.4 208.3-2.8-.2-1.6 1.1-.6 2.3 1.2-2 1.1-.7 2.7.6Z" fill="#d88c70" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path15049" d="m198.7 210.5-2.4-1.1-1.7.6-1.3 2.5.8-2.8 2.1-1.1 2.9.9Z" fill="#dea48b" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path15051" d="M198.5 210.8c.6.9 1.7 1.4 2.7 1.9 1.1.5 2.3 1.3 3.5 1 1.1-.3 2.2-1.2 2.5-2.3.3-1-.3-2-.8-2.9-.4-.7-1.1-1.3-1.9-1.7s-1.7-.7-2.6-.6c-1.1.1-2.4.4-3.2 1.2-.4.4-.5 1-.5 1.6s0 1.3.3 1.8Z" fill="url(#ecosphere-pond-u-path15051-fill)" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path15053" d="M201 207.4c-.6-1.2-.4-2.9.4-1.5" fill="none" stroke="#d78e71" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path15055" d="M200.2 208.7c-.7-.8-1.9-3.4-1.7-1.7" fill="none" stroke="#d78e71" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path15057" d="M201.3 210.2h1.3-.9l.1.1.5.5h.1s0 0 0 0c-.1-.1-.3-.3-.3-.5l-.1-.3.1-.4.1-.3v.1c-.4.2-.4.2-.5.6l-.1.1.2-.3c1.2-.8.6-.6 1.7-.8 0 0 .1 0 0 0H203.2h.4l.2.1-.1-.1-.4-.2c-.1-.2-.2-.2-.3-.2l-.1-.1s-.1-.1-.1 0h.2l.3.4.3.4v.8l-.1.1-.1.1v-.1h.1l.2-.4.1-.2c-1-.7-2.1-1.6-3.2-2.2-.2-.1-.3.2-.4.3.1-.1.2-.3.4-.3 1.4-.6 2.2-.6 3.3 1 .3.3 0 .9-.2 1.3l-.5.5c.1 0 .2-.1.1-.2-.1-.4-1-1.1-1.1-1.2l-.2-.2v0l-1.1-.7a.8.8 0 0 1-.4-.2l.1-.3c-.1-.2-.2-.6-.6.6-.2.4-.5 1-.2 1.4 1 1.5 1.9 1.5 3.3.9l.4-.2-.3.2-3.2-2.3c-.1 0 0-.1 0-.1s0 0 0 0 0 0 0 0l-.1.1c-.3.4-.6.5-.7 1-.3.3-.3.8-.1 1.2l.3.7.6.6.8.4.3.1.1.1-.1-.1-.1-.1s0 0 0 0l.4.2c.4.3.4.2 1 .4h1.8l1.1-.7.3-.5h.1-.1l-.1.1c.2-.1.3-.4.4-.6l.2-.6c0-.3 0-.6-.2-1-.1-.2-.3-.6-.6-.8l-.1-.1-.4-.3s0 0 0 0l.1.2-.1-.1-.7-.3-.4-.3-1-.2-.3.1h-.3l-.6.1-.1.1-.1 2.6Z" paintOrder="markers stroke fill" fill="#d78e71" stroke="#d78e71" strokeWidth=".2" strokeLinecap="round" strokeLinejoin="bevel"/>
</g>
</g>
<g id="ecosphere-pond-u-ostracod-floorcrawler-frame-7">
<g id="ecosphere-pond-u-ostrapod-group-7">
<path id="ecosphere-pond-u-path3364" d="m199 208.3-2.9-.5-2.5.9-.4 3.2.9-2.7 2-.8 2.9.6Z" fill="#cc6f4a" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path3366" d="m198.4 208.4-2.8.2-1.4 1.4-.8 2.3 1.4-2.2 1-.8 2.7.1Z" fill="#d88c70" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path3368" d="m199 210.5-2.8-.1-1.2 1.2.4 2.4-1.1-2.4 1.6-1.9 2.9-.3Z" fill="#dea48b" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path3370" d="M198.5 210.8c.6.9 1.7 1.4 2.7 1.9 1.1.5 2.3 1.3 3.5 1 1.1-.3 2.2-1.2 2.5-2.3.3-1-.3-2-.8-2.9-.4-.7-1.1-1.3-1.9-1.7s-1.7-.7-2.6-.6c-1.1.1-2.4.4-3.2 1.2-.4.4-.5 1-.5 1.6s0 1.3.3 1.8Z" fill="url(#ecosphere-pond-u-path3370-fill)" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path3372" d="M201 207.4c-.6-1.2-.4-2.9.4-1.5" fill="none" stroke="#d78e71" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path3374" d="M200.2 208.7c-.7-.8-1.9-3.4-1.7-1.7" fill="none" stroke="#d78e71" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path3376" d="M201.3 210.2h1.3-.9l.1.1.5.5h.1s0 0 0 0c-.1-.1-.3-.3-.3-.5l-.1-.3.1-.4.1-.3v.1c-.4.2-.4.2-.5.6l-.1.1.2-.3c1.2-.8.6-.6 1.7-.8 0 0 .1 0 0 0H203.2h.4l.2.1-.1-.1-.4-.2c-.1-.2-.2-.2-.3-.2l-.1-.1s-.1-.1-.1 0h.2l.3.4.3.4v.8l-.1.1-.1.1v-.1h.1l.2-.4.1-.2c-1-.7-2.1-1.6-3.2-2.2-.2-.1-.3.2-.4.3.1-.1.2-.3.4-.3 1.4-.6 2.2-.6 3.3 1 .3.3 0 .9-.2 1.3l-.5.5c.1 0 .2-.1.1-.2-.1-.4-1-1.1-1.1-1.2l-.2-.2v0l-1.1-.7a.8.8 0 0 1-.4-.2l.1-.3c-.1-.2-.2-.6-.6.6-.2.4-.5 1-.2 1.4 1 1.5 1.9 1.5 3.3.9l.4-.2-.3.2-3.2-2.3c-.1 0 0-.1 0-.1s0 0 0 0 0 0 0 0l-.1.1c-.3.4-.6.5-.7 1-.3.3-.3.8-.1 1.2l.3.7.6.6.8.4.3.1.1.1-.1-.1-.1-.1s0 0 0 0l.4.2c.4.3.4.2 1 .4h1.8l1.1-.7.3-.5h.1-.1l-.1.1c.2-.1.3-.4.4-.6l.2-.6c0-.3 0-.6-.2-1-.1-.2-.3-.6-.6-.8l-.1-.1-.4-.3s0 0 0 0l.1.2-.1-.1-.7-.3-.4-.3-1-.2-.3.1h-.3l-.6.1-.1.1-.1 2.6Z" paintOrder="markers stroke fill" fill="#d78e71" stroke="#d78e71" strokeWidth=".2" strokeLinecap="round" strokeLinejoin="bevel"/>
</g>
</g>
<g id="ecosphere-pond-u-ostracod-floorcrawler-frame-8">
<g id="ecosphere-pond-u-g75234">
<path id="ecosphere-pond-u-path75220" d="m199.1 208.4-2.2-1.4-3.5-.5-3.5 1.6 3.6-.8 2.5.1 2.9 1.7Z" fill="#cc6f4a" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path75222" d="m198.3 208.6-2.4-1.8-2.8 1.7-1.2 3.3 2-2.6 1.9-1.4 2.6 1.8Z" fill="#d88c70" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path75224" d="m198.9 210.5-2.9-.6-2.6 1.9-1.7 1.8.9-2.3 3.2-2.2 3.2.3Z" fill="#dea48b" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path75226" d="M198.5 210.8c.6.9 1.7 1.4 2.7 1.9 1.1.5 2.3 1.3 3.5 1 1.1-.3 2.2-1.2 2.5-2.3.3-1-.3-2-.8-2.9-.4-.7-1.1-1.3-1.9-1.7s-1.7-.7-2.6-.6c-1.1.1-2.4.4-3.2 1.2-.4.4-.5 1-.5 1.6s0 1.3.3 1.8Z" fill="url(#ecosphere-pond-u-path75226-fill)" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path75228" d="M201 207.4s-.8-1.9-.6-2.9c.2-.8.7-1.6 1.4-2 .3-.2 1-.2 1-.2" fill="none" stroke="#d78e71" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path75230" d="M200.2 208.7s-.7-2.4-1.4-3.4c-.3-.4-.6-1.2-1-1-.5.3.2 1.8.2 1.8" fill="none" stroke="#d78e71" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path75232" d="M201.3 210.2h1.3-.9l.1.1.5.5h.1s0 0 0 0c-.1-.1-.3-.3-.3-.5l-.1-.3.1-.4.1-.3v.1c-.4.2-.4.2-.5.6l-.1.1.2-.3c1.2-.8.6-.6 1.7-.8 0 0 .1 0 0 0H203.2h.4l.2.1-.1-.1-.4-.2c-.1-.2-.2-.2-.3-.2l-.1-.1s-.1-.1-.1 0h.2l.3.4.3.4v.8l-.1.1-.1.1v-.1h.1l.2-.4.1-.2c-1-.7-2.1-1.6-3.2-2.2-.2-.1-.3.2-.4.3.1-.1.2-.3.4-.3 1.4-.6 2.2-.6 3.3 1 .3.3 0 .9-.2 1.3l-.5.5c.1 0 .2-.1.1-.2-.1-.4-1-1.1-1.1-1.2l-.2-.2v0l-1.1-.7a.8.8 0 0 1-.4-.2l.1-.3c-.1-.2-.2-.6-.6.6-.2.4-.5 1-.2 1.4 1 1.5 1.9 1.5 3.3.9l.4-.2-.3.2-3.2-2.3c-.1 0 0-.1 0-.1s0 0 0 0 0 0 0 0l-.1.1c-.3.4-.6.5-.7 1-.3.3-.3.8-.1 1.2l.3.7.6.6.8.4.3.1.1.1-.1-.1-.1-.1s0 0 0 0l.4.2c.4.3.4.2 1 .4h1.8l1.1-.7.3-.5h.1-.1l-.1.1c.2-.1.3-.4.4-.6l.2-.6c0-.3 0-.6-.2-1-.1-.2-.3-.6-.6-.8l-.1-.1-.4-.3s0 0 0 0l.1.2-.1-.1-.7-.3-.4-.3-1-.2-.3.1h-.3l-.6.1-.1.1-.1 2.6Z" paintOrder="markers stroke fill" fill="#d78e71" stroke="#d78e71" strokeWidth=".2" strokeLinecap="round" strokeLinejoin="bevel"/>
</g>
</g>

在组件中:

useEffect(()=>{
const ostracodTL = gsap.timeline({repeat:-1});
ostracodTL.set("[id^='ecosphere-pond-u-ostracod-floorcrawler-frame-']", { autoAlpha: 1, stagger: 1 / 16 });
ostracodTL.set("[id^='ecosphere-pond-u-ostracod-floorcrawler-frame-']", { autoAlpha: 0, stagger: 1 / 16 }, 1 / 16);
},[])

以上部分正在工作。不适合我的部分是沿着路径的运动。

<g id="ecosphere-pond-u-ostracod-path">
<path id="ecosphere-pond-u-path-of-the-ostracod" d="m165.3 244.8-1.6.5-.9 1.5-1.1 1.3-1.5.6-1.7-.1-1.6.7-.9 1.2-.6.6-1.3-.2-.9-.7h-1.1l-1.5.6-1.1.5-2.2 2.2-2.9 2.3-2.3.7-2.4.4-1.5-.7-1.2-.8-1.3.6-.7-.7-1.8 1.2-1.3 1.2-1.5.5-1.5.6-.8-.4-.6-.6-.5.4-.3.9.1.4-1.2.1-.5-.2-1-.6-.9-.5h-.6l-.8.7-.7.7-1.1 1.4-1.2.5-2 .8-2 .3-3.3.8-2.7-.8.1-.1-1.3-.8-.9-1-.8-.5h-.9l-.6.9-1 .5-.9-.5-1-.5-.9.3-.8.6-1.1 1-2.2.8-2 .8-1.8.1-1-.7-1.2-.7-1 .4-.7 1-1 .5-.9.5-1.4-.4-.5-.3-1-1.4-1-.6-1-.9-1-.5-1-.6-.7-.1-.7.3-.8-.2-.7-.2-.2-.4-1.2-.4-.3-.5-1.2.2-2.1 1.3-1 .6c-.2.4-2.2.7-2.2.7l-2.6.1-2.5-.2-.8-.4-1.3-.5-.9-.1-2 .8-2.2 1.1-1.9.5c-.3.1-1.5 2-1.5 2l-1.7-2.1-1.9-.8h-1.8l-1.1-.3-1.2.7-2.3 9.3 53.7 1.4 35.1.2 34.3-.1 1.4-27.3Z" fill="none" stroke="#ffc61c" strokeWidth=".3"/>
</g>

我试着把下面的代码放在父("#ecosphere-pond-u-ostracod- floorcrawer -frames")组中，但它就是抓不到:

<animateMotion dur="6s" repeatCount="indefinite" rotate="auto" >
<mpath xlinkHref="#ecosphere-pond-u-ostracod-path"/>
</animateMotion>

我是否使用了错误的id?或者我可以不为一组组设置运动路径吗?

Answer 1

在下一个示例中，我将介形体放在另一个svg元素的符号中。我这么做是为了说清楚。如果您愿意，您可以将它们全部放在同一个svg元素中。符号也是可选的。你也可以使用组，但符号允许选择介形的大小跟随路径;例如20个单位:<use xlink:href="#ostracod" width="20" height="20" ....

还请注意，我已经翻译了use元素transform="translate(-10 -10)"，因为我想把use的中心放在点{x:0,y:0}。这样，它的中心将始终在路径上。

<svg viewBox="30 230 150 60">
<path id="ecosphere-pond-u-path-of-the-ostracod" d="m165.3 244.8-1.6.5-.9 1.5-1.1 1.3-1.5.6-1.7-.1-1.6.7-.9 1.2-.6.6-1.3-.2-.9-.7h-1.1l-1.5.6-1.1.5-2.2 2.2-2.9 2.3-2.3.7-2.4.4-1.5-.7-1.2-.8-1.3.6-.7-.7-1.8 1.2-1.3 1.2-1.5.5-1.5.6-.8-.4-.6-.6-.5.4-.3.9.1.4-1.2.1-.5-.2-1-.6-.9-.5h-.6l-.8.7-.7.7-1.1 1.4-1.2.5-2 .8-2 .3-3.3.8-2.7-.8.1-.1-1.3-.8-.9-1-.8-.5h-.9l-.6.9-1 .5-.9-.5-1-.5-.9.3-.8.6-1.1 1-2.2.8-2 .8-1.8.1-1-.7-1.2-.7-1 .4-.7 1-1 .5-.9.5-1.4-.4-.5-.3-1-1.4-1-.6-1-.9-1-.5-1-.6-.7-.1-.7.3-.8-.2-.7-.2-.2-.4-1.2-.4-.3-.5-1.2.2-2.1 1.3-1 .6c-.2.4-2.2.7-2.2.7l-2.6.1-2.5-.2-.8-.4-1.3-.5-.9-.1-2 .8-2.2 1.1-1.9.5c-.3.1-1.5 2-1.5 2l-1.7-2.1-1.9-.8h-1.8l-1.1-.3-1.2.7-2.3 9.3 53.7 1.4 35.1.2 34.3-.1 1.4-27.3Z" fill="none" stroke="#ffc61c" strokeWidth=".3"/>


<use xlink:href="#ostracod" width="20" height="20" transform="translate(-10 -10)">
<animateMotion dur="6s" repeatCount="indefinite" rotate="auto">
<mpath xlink:href="#ecosphere-pond-u-path-of-the-ostracod" />
</animateMotion>      
</use>      
</svg>

<svg width="0" height="0">
<symbol viewBox="189.9 202.3 17.4 11.7" id="ostracod">

<g id="ecosphere-pond-u-ostracod-floorcrawler-frame-1">
<g id="ecosphere-pond-u-ostrapod-group-1">
<path id="ecosphere-pond-u-path8704" d="m199.1 208.4-2.2-1.4-3.5-.5-3.5 1.6 3.6-.8 2.5.1 2.9 1.7Z" fill="#cc6f4a" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path8700" d="m198.3 208.6-2.4-1.8-2.8 1.7-1.2 3.3 2-2.6 1.9-1.4 2.6 1.8Z" fill="#d88c70" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path8702" d="m198.9 210.5-2.9-.6-2.6 1.9-1.7 1.8.9-2.3 3.2-2.2 3.2.3Z" fill="#dea48b" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path8698" d="M198.5 210.8c.6.9 1.7 1.4 2.7 1.9 1.1.5 2.3 1.3 3.5 1 1.1-.3 2.2-1.2 2.5-2.3.3-1-.3-2-.8-2.9-.4-.7-1.1-1.3-1.9-1.7s-1.7-.7-2.6-.6c-1.1.1-2.4.4-3.2 1.2-.4.4-.5 1-.5 1.6s0 1.3.3 1.8Z" fill="url(#ecosphere-pond-u-path8698-fill)" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path8706" d="M201 207.4s-.8-1.9-.6-2.9c.2-.8.7-1.6 1.4-2 .3-.2 1-.2 1-.2" fill="none" stroke="#d78e71" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path8708" d="M200.2 208.7s-.7-2.4-1.4-3.4c-.3-.4-.6-1.2-1-1-.5.3.2 1.8.2 1.8" fill="none" stroke="#d78e71" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path24400" d="M201.3 210.2h1.3-.9l.1.1.5.5h.1s0 0 0 0c-.1-.1-.3-.3-.3-.5l-.1-.3.1-.4.1-.3v.1c-.4.2-.4.2-.5.6l-.1.1.2-.3c1.2-.8.6-.6 1.7-.8 0 0 .1 0 0 0H203.2h.4l.2.1-.1-.1-.4-.2c-.1-.2-.2-.2-.3-.2l-.1-.1s-.1-.1-.1 0h.2l.3.4.3.4v.8l-.1.1-.1.1v-.1h.1l.2-.4.1-.2c-1-.7-2.1-1.6-3.2-2.2-.2-.1-.3.2-.4.3.1-.1.2-.3.4-.3 1.4-.6 2.2-.6 3.3 1 .3.3 0 .9-.2 1.3l-.5.5c.1 0 .2-.1.1-.2-.1-.4-1-1.1-1.1-1.2l-.2-.2v0l-1.1-.7a.8.8 0 0 1-.4-.2l.1-.3c-.1-.2-.2-.6-.6.6-.2.4-.5 1-.2 1.4 1 1.5 1.9 1.5 3.3.9l.4-.2-.3.2-3.2-2.3c-.1 0 0-.1 0-.1s0 0 0 0 0 0 0 0l-.1.1c-.3.4-.6.5-.7 1-.3.3-.3.8-.1 1.2l.3.7.6.6.8.4.3.1.1.1-.1-.1-.1-.1s0 0 0 0l.4.2c.4.3.4.2 1 .4h1.8l1.1-.7.3-.5h.1-.1l-.1.1c.2-.1.3-.4.4-.6l.2-.6c0-.3 0-.6-.2-1-.1-.2-.3-.6-.6-.8l-.1-.1-.4-.3s0 0 0 0l.1.2-.1-.1-.7-.3-.4-.3-1-.2-.3.1h-.3l-.6.1-.1.1-.1 2.6Z" paintOrder="markers stroke fill" fill="#d78e71" stroke="#d78e71" strokeWidth=".2" strokeLinecap="round" strokeLinejoin="bevel"/>
</g>
</g>
<g id="ecosphere-pond-u-ostracod-floorcrawler-frame-2">
<g id="ecosphere-pond-u-ostrapod-group-2">
<path id="ecosphere-pond-u-path32356" d="m199.1 208.4-2.2-1-3.2.4-2.4 2.6 2.5-1.8 2.7-.5 2.4 1Z" fill="#cc6f4a" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path32358" d="m198.3 208.6-2.4-.9-2.7 1.3.5 3.2.3-2.5 1.8-1 2.6.9Z" fill="#d88c70" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path32360" d="m198.9 210.5-2.9-.6-2.4 1.4-.8 2.2.2-2.5 2.8-1.9 3.2.3Z" fill="#dea48b" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path32362" d="M198.5 210.8c.6.9 1.7 1.4 2.7 1.9 1.1.5 2.3 1.3 3.5 1 1.1-.3 2.2-1.2 2.5-2.3.3-1-.3-2-.8-2.9-.4-.7-1.1-1.3-1.9-1.7s-1.7-.7-2.6-.6c-1.1.1-2.4.4-3.2 1.2-.4.4-.5 1-.5 1.6s0 1.3.3 1.8Z" fill="url(#ecosphere-pond-u-path32362-fill)" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path32364" d="M201 207.4s-.8-1.9-.6-2.9c.2-.8.4-1 1.1-1.3.7-.2 1.1 1 1.1 1" fill="none" stroke="#d78e71" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path32366" d="M200.2 208.7s-.3-1.8-.9-2.9c-.6-1-.8-1.1-1.2-.9-.5.3-.3 2.1-.3 2.1" fill="none" stroke="#d78e71" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path32368" d="M201.3 210.2h1.3-.9l.1.1.5.5h.1s0 0 0 0c-.1-.1-.3-.3-.3-.5l-.1-.3.1-.4.1-.3v.1c-.4.2-.4.2-.5.6l-.1.1.2-.3c1.2-.8.6-.6 1.7-.8 0 0 .1 0 0 0H203.2h.4l.2.1-.1-.1-.4-.2c-.1-.2-.2-.2-.3-.2l-.1-.1s-.1-.1-.1 0h.2l.3.4.3.4v.8l-.1.1-.1.1v-.1h.1l.2-.4.1-.2c-1-.7-2.1-1.6-3.2-2.2-.2-.1-.3.2-.4.3.1-.1.2-.3.4-.3 1.4-.6 2.2-.6 3.3 1 .3.3 0 .9-.2 1.3l-.5.5c.1 0 .2-.1.1-.2-.1-.4-1-1.1-1.1-1.2l-.2-.2v0l-1.1-.7a.8.8 0 0 1-.4-.2l.1-.3c-.1-.2-.2-.6-.6.6-.2.4-.5 1-.2 1.4 1 1.5 1.9 1.5 3.3.9l.4-.2-.3.2-3.2-2.3c-.1 0 0-.1 0-.1s0 0 0 0 0 0 0 0l-.1.1c-.3.4-.6.5-.7 1-.3.3-.3.8-.1 1.2l.3.7.6.6.8.4.3.1.1.1-.1-.1-.1-.1s0 0 0 0l.4.2c.4.3.4.2 1 .4h1.8l1.1-.7.3-.5h.1-.1l-.1.1c.2-.1.3-.4.4-.6l.2-.6c0-.3 0-.6-.2-1-.1-.2-.3-.6-.6-.8l-.1-.1-.4-.3s0 0 0 0l.1.2-.1-.1-.7-.3-.4-.3-1-.2-.3.1h-.3l-.6.1-.1.1-.1 2.6Z" paintOrder="markers stroke fill" fill="#d78e71" stroke="#d78e71" strokeWidth=".2" strokeLinecap="round" strokeLinejoin="bevel"/>
</g>
</g>
<g id="ecosphere-pond-u-ostracod-floorcrawler-frame-3">
<g id="ecosphere-pond-u-ostrapod-group-3">
<path id="ecosphere-pond-u-path32378" d="m199.1 208.4-3.1-.9-2.9.9-1.1 2.6 1.7-2 2.4-.8 2.8.9Z" fill="#cc6f4a" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path32380" d="m198.3 208.6-2.9-.4-2.2 2-.3 2.2 1-1.7 1.6-1.6 2.9.5Z" fill="#d88c70" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path32382" d="m198.9 210.5-2.7-.4-1.3 1v2.4l-.6-2.7 1.6-1.4h3.1Z" fill="#dea48b" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path32384" d="M198.5 210.8c.6.9 1.7 1.4 2.7 1.9 1.1.5 2.3 1.3 3.5 1 1.1-.3 2.2-1.2 2.5-2.3.3-1-.3-2-.8-2.9-.4-.7-1.1-1.3-1.9-1.7s-1.7-.7-2.6-.6c-1.1.1-2.4.4-3.2 1.2-.4.4-.5 1-.5 1.6s0 1.3.3 1.8Z" fill="url(#ecosphere-pond-u-path32384-fill)" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path32386" d="M201 207.4s-.7-1.9-.7-2.9c0-.3-.1-.5.5-.9s1.1 1 1.1 1" fill="none" stroke="#d78e71" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path32388" d="M200.2 208.7s-.3-1.7-1.2-3.2c-.9-.1-.8.7-.8.7" fill="none" stroke="#d78e71" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path32390" d="M201.3 210.2h1.3-.9l.1.1.5.5h.1s0 0 0 0c-.1-.1-.3-.3-.3-.5l-.1-.3.1-.4.1-.3v.1c-.4.2-.4.2-.5.6l-.1.1.2-.3c1.2-.8.6-.6 1.7-.8 0 0 .1 0 0 0H203.2h.4l.2.1-.1-.1-.4-.2c-.1-.2-.2-.2-.3-.2l-.1-.1s-.1-.1-.1 0h.2l.3.4.3.4v.8l-.1.1-.1.1v-.1h.1l.2-.4.1-.2c-1-.7-2.1-1.6-3.2-2.2-.2-.1-.3.2-.4.3.1-.1.2-.3.4-.3 1.4-.6 2.2-.6 3.3 1 .3.3 0 .9-.2 1.3l-.5.5c.1 0 .2-.1.1-.2-.1-.4-1-1.1-1.1-1.2l-.2-.2v0l-1.1-.7a.8.8 0 0 1-.4-.2l.1-.3c-.1-.2-.2-.6-.6.6-.2.4-.5 1-.2 1.4 1 1.5 1.9 1.5 3.3.9l.4-.2-.3.2-3.2-2.3c-.1 0 0-.1 0-.1s0 0 0 0 0 0 0 0l-.1.1c-.3.4-.6.5-.7 1-.3.3-.3.8-.1 1.2l.3.7.6.6.8.4.3.1.1.1-.1-.1-.1-.1s0 0 0 0l.4.2c.4.3.4.2 1 .4h1.8l1.1-.7.3-.5h.1-.1l-.1.1c.2-.1.3-.4.4-.6l.2-.6c0-.3 0-.6-.2-1-.1-.2-.3-.6-.6-.8l-.1-.1-.4-.3s0 0 0 0l.1.2-.1-.1-.7-.3-.4-.3-1-.2-.3.1h-.3l-.6.1-.1.1-.1 2.6Z" paintOrder="markers stroke fill" fill="#d78e71" stroke="#d78e71" strokeWidth=".2" strokeLinecap="round" strokeLinejoin="bevel"/>
</g>
</g>
<g id="ecosphere-pond-u-ostracod-floorcrawler-frame-4">
<g id="ecosphere-pond-u-ostrapod-group-4">
<path id="ecosphere-pond-u-path36315" d="m199 208.3-3.2-.2-2.6 1.5-.5 2.7 1.2-2.3 2.2-1.3 2.9.3Z" fill="#cc6f4a" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path36317" d="m198.2 208.6-2.9.5-1.2 2.3.7 2.5.1-2.2.8-1.8 2.9-.3Z" fill="#d88c70" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path36319" d="m198.6 210.6-2.2-1.5-1.6.3-1.1 2.2.6-2.7 2.1-.6 2.8 1.3Z" fill="#dea48b" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path36321" d="M198.5 210.8c.6.9 1.7 1.4 2.7 1.9 1.1.5 2.3 1.3 3.5 1 1.1-.3 2.2-1.2 2.5-2.3.3-1-.3-2-.8-2.9-.4-.7-1.1-1.3-1.9-1.7s-1.7-.7-2.6-.6c-1.1.1-2.4.4-3.2 1.2-.4.4-.5 1-.5 1.6s0 1.3.3 1.8Z" fill="url(#ecosphere-pond-u-path36321-fill)" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path36323" d="M201 207.4s-.4-1.1-.4-2.1c0-.3.1-.4.7-.8s1.1 1 1.1 1" fill="none" stroke="#d78e71" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path36325" d="M200.2 208.7s-.2-.9-1.1-2.4c-.7-.1-.9.2-.9.2" fill="none" stroke="#d78e71" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path36327" d="M201.3 210.2h1.3-.9l.1.1.5.5h.1s0 0 0 0c-.1-.1-.3-.3-.3-.5l-.1-.3.1-.4.1-.3v.1c-.4.2-.4.2-.5.6l-.1.1.2-.3c1.2-.8.6-.6 1.7-.8 0 0 .1 0 0 0H203.2h.4l.2.1-.1-.1-.4-.2c-.1-.2-.2-.2-.3-.2l-.1-.1s-.1-.1-.1 0h.2l.3.4.3.4v.8l-.1.1-.1.1v-.1h.1l.2-.4.1-.2c-1-.7-2.1-1.6-3.2-2.2-.2-.1-.3.2-.4.3.1-.1.2-.3.4-.3 1.4-.6 2.2-.6 3.3 1 .3.3 0 .9-.2 1.3l-.5.5c.1 0 .2-.1.1-.2-.1-.4-1-1.1-1.1-1.2l-.2-.2v0l-1.1-.7a.8.8 0 0 1-.4-.2l.1-.3c-.1-.2-.2-.6-.6.6-.2.4-.5 1-.2 1.4 1 1.5 1.9 1.5 3.3.9l.4-.2-.3.2-3.2-2.3c-.1 0 0-.1 0-.1s0 0 0 0 0 0 0 0l-.1.1c-.3.4-.6.5-.7 1-.3.3-.3.8-.1 1.2l.3.7.6.6.8.4.3.1.1.1-.1-.1-.1-.1s0 0 0 0l.4.2c.4.3.4.2 1 .4h1.8l1.1-.7.3-.5h.1-.1l-.1.1c.2-.1.3-.4.4-.6l.2-.6c0-.3 0-.6-.2-1-.1-.2-.3-.6-.6-.8l-.1-.1-.4-.3s0 0 0 0l.1.2-.1-.1-.7-.3-.4-.3-1-.2-.3.1h-.3l-.6.1-.1.1-.1 2.6Z" paintOrder="markers stroke fill" fill="#d78e71" stroke="#d78e71" strokeWidth=".2" strokeLinecap="round" strokeLinejoin="bevel"/>
</g>
</g>
<g id="ecosphere-pond-u-ostracod-floorcrawler-frame-5">
<g id="ecosphere-pond-u-ostrapod-group-5">
<path id="ecosphere-pond-u-path11751" d="m199 208.3-3-.2-2.3 1.2-.1 3.1.6-2.7 1.9-1 2.9.3Z" fill="#cc6f4a" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path11753" d="m198.2 208.6-2.9 1-.7 1.9 1.1 2.2-.5-2.3.7-1.3 2.7-.5Z" fill="#d88c70" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path11755" d="m198.6 210.6-2.2-1.5-1.5-.1-2 1.4 1.6-2 1.9-.1 2.8 1.3Z" fill="#dea48b" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path11757" d="M198.5 210.8c.6.9 1.7 1.4 2.7 1.9 1.1.5 2.3 1.3 3.5 1 1.1-.3 2.2-1.2 2.5-2.3.3-1-.3-2-.8-2.9-.4-.7-1.1-1.3-1.9-1.7s-1.7-.7-2.6-.6c-1.1.1-2.4.4-3.2 1.2-.4.4-.5 1-.5 1.6s0 1.3.3 1.8Z" fill="url(#ecosphere-pond-u-path11757-fill)" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path11759" d="M201 207.4c-.6-1.2-.3-4 .7-1.7" fill="none" stroke="#d78e71" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path11761" d="M200.2 208.7c-.7-.8-1.3-3.1-1.9-2" fill="none" stroke="#d78e71" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path11763" d="M201.3 210.2h1.3-.9l.1.1.5.5h.1s0 0 0 0c-.1-.1-.3-.3-.3-.5l-.1-.3.1-.4.1-.3v.1c-.4.2-.4.2-.5.6l-.1.1.2-.3c1.2-.8.6-.6 1.7-.8 0 0 .1 0 0 0H203.2h.4l.2.1-.1-.1-.4-.2c-.1-.2-.2-.2-.3-.2l-.1-.1s-.1-.1-.1 0h.2l.3.4.3.4v.8l-.1.1-.1.1v-.1h.1l.2-.4.1-.2c-1-.7-2.1-1.6-3.2-2.2-.2-.1-.3.2-.4.3.1-.1.2-.3.4-.3 1.4-.6 2.2-.6 3.3 1 .3.3 0 .9-.2 1.3l-.5.5c.1 0 .2-.1.1-.2-.1-.4-1-1.1-1.1-1.2l-.2-.2v0l-1.1-.7a.8.8 0 0 1-.4-.2l.1-.3c-.1-.2-.2-.6-.6.6-.2.4-.5 1-.2 1.4 1 1.5 1.9 1.5 3.3.9l.4-.2-.3.2-3.2-2.3c-.1 0 0-.1 0-.1s0 0 0 0 0 0 0 0l-.1.1c-.3.4-.6.5-.7 1-.3.3-.3.8-.1 1.2l.3.7.6.6.8.4.3.1.1.1-.1-.1-.1-.1s0 0 0 0l.4.2c.4.3.4.2 1 .4h1.8l1.1-.7.3-.5h.1-.1l-.1.1c.2-.1.3-.4.4-.6l.2-.6c0-.3 0-.6-.2-1-.1-.2-.3-.6-.6-.8l-.1-.1-.4-.3s0 0 0 0l.1.2-.1-.1-.7-.3-.4-.3-1-.2-.3.1h-.3l-.6.1-.1.1-.1 2.6Z" paintOrder="markers stroke fill" fill="#d78e71" stroke="#d78e71" strokeWidth=".2" strokeLinecap="round" strokeLinejoin="bevel"/>
</g>
</g>
<g id="ecosphere-pond-u-ostracod-floorcrawler-frame-6">
<g id="ecosphere-pond-u-ostrapod-group-6">
<path id="ecosphere-pond-u-path15045" d="m198.9 208.3-2.9.6-2 1.7.8 3.1-.2-2.8 1.6-1.5 2.9-.4Z" fill="#cc6f4a" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path15047" d="m198.4 208.3-2.8-.2-1.6 1.1-.6 2.3 1.2-2 1.1-.7 2.7.6Z" fill="#d88c70" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path15049" d="m198.7 210.5-2.4-1.1-1.7.6-1.3 2.5.8-2.8 2.1-1.1 2.9.9Z" fill="#dea48b" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path15051" d="M198.5 210.8c.6.9 1.7 1.4 2.7 1.9 1.1.5 2.3 1.3 3.5 1 1.1-.3 2.2-1.2 2.5-2.3.3-1-.3-2-.8-2.9-.4-.7-1.1-1.3-1.9-1.7s-1.7-.7-2.6-.6c-1.1.1-2.4.4-3.2 1.2-.4.4-.5 1-.5 1.6s0 1.3.3 1.8Z" fill="url(#ecosphere-pond-u-path15051-fill)" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path15053" d="M201 207.4c-.6-1.2-.4-2.9.4-1.5" fill="none" stroke="#d78e71" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path15055" d="M200.2 208.7c-.7-.8-1.9-3.4-1.7-1.7" fill="none" stroke="#d78e71" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path15057" d="M201.3 210.2h1.3-.9l.1.1.5.5h.1s0 0 0 0c-.1-.1-.3-.3-.3-.5l-.1-.3.1-.4.1-.3v.1c-.4.2-.4.2-.5.6l-.1.1.2-.3c1.2-.8.6-.6 1.7-.8 0 0 .1 0 0 0H203.2h.4l.2.1-.1-.1-.4-.2c-.1-.2-.2-.2-.3-.2l-.1-.1s-.1-.1-.1 0h.2l.3.4.3.4v.8l-.1.1-.1.1v-.1h.1l.2-.4.1-.2c-1-.7-2.1-1.6-3.2-2.2-.2-.1-.3.2-.4.3.1-.1.2-.3.4-.3 1.4-.6 2.2-.6 3.3 1 .3.3 0 .9-.2 1.3l-.5.5c.1 0 .2-.1.1-.2-.1-.4-1-1.1-1.1-1.2l-.2-.2v0l-1.1-.7a.8.8 0 0 1-.4-.2l.1-.3c-.1-.2-.2-.6-.6.6-.2.4-.5 1-.2 1.4 1 1.5 1.9 1.5 3.3.9l.4-.2-.3.2-3.2-2.3c-.1 0 0-.1 0-.1s0 0 0 0 0 0 0 0l-.1.1c-.3.4-.6.5-.7 1-.3.3-.3.8-.1 1.2l.3.7.6.6.8.4.3.1.1.1-.1-.1-.1-.1s0 0 0 0l.4.2c.4.3.4.2 1 .4h1.8l1.1-.7.3-.5h.1-.1l-.1.1c.2-.1.3-.4.4-.6l.2-.6c0-.3 0-.6-.2-1-.1-.2-.3-.6-.6-.8l-.1-.1-.4-.3s0 0 0 0l.1.2-.1-.1-.7-.3-.4-.3-1-.2-.3.1h-.3l-.6.1-.1.1-.1 2.6Z" paintOrder="markers stroke fill" fill="#d78e71" stroke="#d78e71" strokeWidth=".2" strokeLinecap="round" strokeLinejoin="bevel"/>
</g>
</g>
<g id="ecosphere-pond-u-ostracod-floorcrawler-frame-7">
<g id="ecosphere-pond-u-ostrapod-group-7">
<path id="ecosphere-pond-u-path3364" d="m199 208.3-2.9-.5-2.5.9-.4 3.2.9-2.7 2-.8 2.9.6Z" fill="#cc6f4a" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path3366" d="m198.4 208.4-2.8.2-1.4 1.4-.8 2.3 1.4-2.2 1-.8 2.7.1Z" fill="#d88c70" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path3368" d="m199 210.5-2.8-.1-1.2 1.2.4 2.4-1.1-2.4 1.6-1.9 2.9-.3Z" fill="#dea48b" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path3370" d="M198.5 210.8c.6.9 1.7 1.4 2.7 1.9 1.1.5 2.3 1.3 3.5 1 1.1-.3 2.2-1.2 2.5-2.3.3-1-.3-2-.8-2.9-.4-.7-1.1-1.3-1.9-1.7s-1.7-.7-2.6-.6c-1.1.1-2.4.4-3.2 1.2-.4.4-.5 1-.5 1.6s0 1.3.3 1.8Z" fill="url(#ecosphere-pond-u-path3370-fill)" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path3372" d="M201 207.4c-.6-1.2-.4-2.9.4-1.5" fill="none" stroke="#d78e71" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path3374" d="M200.2 208.7c-.7-.8-1.9-3.4-1.7-1.7" fill="none" stroke="#d78e71" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path3376" d="M201.3 210.2h1.3-.9l.1.1.5.5h.1s0 0 0 0c-.1-.1-.3-.3-.3-.5l-.1-.3.1-.4.1-.3v.1c-.4.2-.4.2-.5.6l-.1.1.2-.3c1.2-.8.6-.6 1.7-.8 0 0 .1 0 0 0H203.2h.4l.2.1-.1-.1-.4-.2c-.1-.2-.2-.2-.3-.2l-.1-.1s-.1-.1-.1 0h.2l.3.4.3.4v.8l-.1.1-.1.1v-.1h.1l.2-.4.1-.2c-1-.7-2.1-1.6-3.2-2.2-.2-.1-.3.2-.4.3.1-.1.2-.3.4-.3 1.4-.6 2.2-.6 3.3 1 .3.3 0 .9-.2 1.3l-.5.5c.1 0 .2-.1.1-.2-.1-.4-1-1.1-1.1-1.2l-.2-.2v0l-1.1-.7a.8.8 0 0 1-.4-.2l.1-.3c-.1-.2-.2-.6-.6.6-.2.4-.5 1-.2 1.4 1 1.5 1.9 1.5 3.3.9l.4-.2-.3.2-3.2-2.3c-.1 0 0-.1 0-.1s0 0 0 0 0 0 0 0l-.1.1c-.3.4-.6.5-.7 1-.3.3-.3.8-.1 1.2l.3.7.6.6.8.4.3.1.1.1-.1-.1-.1-.1s0 0 0 0l.4.2c.4.3.4.2 1 .4h1.8l1.1-.7.3-.5h.1-.1l-.1.1c.2-.1.3-.4.4-.6l.2-.6c0-.3 0-.6-.2-1-.1-.2-.3-.6-.6-.8l-.1-.1-.4-.3s0 0 0 0l.1.2-.1-.1-.7-.3-.4-.3-1-.2-.3.1h-.3l-.6.1-.1.1-.1 2.6Z" paintOrder="markers stroke fill" fill="#d78e71" stroke="#d78e71" strokeWidth=".2" strokeLinecap="round" strokeLinejoin="bevel"/>
</g>
</g>
<g id="ecosphere-pond-u-ostracod-floorcrawler-frame-8">
<g id="ecosphere-pond-u-g75234">
<path id="ecosphere-pond-u-path75220" d="m199.1 208.4-2.2-1.4-3.5-.5-3.5 1.6 3.6-.8 2.5.1 2.9 1.7Z" fill="#cc6f4a" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path75222" d="m198.3 208.6-2.4-1.8-2.8 1.7-1.2 3.3 2-2.6 1.9-1.4 2.6 1.8Z" fill="#d88c70" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path75224" d="m198.9 210.5-2.9-.6-2.6 1.9-1.7 1.8.9-2.3 3.2-2.2 3.2.3Z" fill="#dea48b" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path75226" d="M198.5 210.8c.6.9 1.7 1.4 2.7 1.9 1.1.5 2.3 1.3 3.5 1 1.1-.3 2.2-1.2 2.5-2.3.3-1-.3-2-.8-2.9-.4-.7-1.1-1.3-1.9-1.7s-1.7-.7-2.6-.6c-1.1.1-2.4.4-3.2 1.2-.4.4-.5 1-.5 1.6s0 1.3.3 1.8Z" fill="url(#ecosphere-pond-u-path75226-fill)" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path75228" d="M201 207.4s-.8-1.9-.6-2.9c.2-.8.7-1.6 1.4-2 .3-.2 1-.2 1-.2" fill="none" stroke="#d78e71" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path75230" d="M200.2 208.7s-.7-2.4-1.4-3.4c-.3-.4-.6-1.2-1-1-.5.3.2 1.8.2 1.8" fill="none" stroke="#d78e71" strokeWidth=".3"/>
<path id="ecosphere-pond-u-path75232" d="M201.3 210.2h1.3-.9l.1.1.5.5h.1s0 0 0 0c-.1-.1-.3-.3-.3-.5l-.1-.3.1-.4.1-.3v.1c-.4.2-.4.2-.5.6l-.1.1.2-.3c1.2-.8.6-.6 1.7-.8 0 0 .1 0 0 0H203.2h.4l.2.1-.1-.1-.4-.2c-.1-.2-.2-.2-.3-.2l-.1-.1s-.1-.1-.1 0h.2l.3.4.3.4v.8l-.1.1-.1.1v-.1h.1l.2-.4.1-.2c-1-.7-2.1-1.6-3.2-2.2-.2-.1-.3.2-.4.3.1-.1.2-.3.4-.3 1.4-.6 2.2-.6 3.3 1 .3.3 0 .9-.2 1.3l-.5.5c.1 0 .2-.1.1-.2-.1-.4-1-1.1-1.1-1.2l-.2-.2v0l-1.1-.7a.8.8 0 0 1-.4-.2l.1-.3c-.1-.2-.2-.6-.6.6-.2.4-.5 1-.2 1.4 1 1.5 1.9 1.5 3.3.9l.4-.2-.3.2-3.2-2.3c-.1 0 0-.1 0-.1s0 0 0 0 0 0 0 0l-.1.1c-.3.4-.6.5-.7 1-.3.3-.3.8-.1 1.2l.3.7.6.6.8.4.3.1.1.1-.1-.1-.1-.1s0 0 0 0l.4.2c.4.3.4.2 1 .4h1.8l1.1-.7.3-.5h.1-.1l-.1.1c.2-.1.3-.4.4-.6l.2-.6c0-.3 0-.6-.2-1-.1-.2-.3-.6-.6-.8l-.1-.1-.4-.3s0 0 0 0l.1.2-.1-.1-.7-.3-.4-.3-1-.2-.3.1h-.3l-.6.1-.1.1-.1 2.6Z" paintOrder="markers stroke fill" fill="#d78e71" stroke="#d78e71" strokeWidth=".2" strokeLinecap="round" strokeLinejoin="bevel"/>
</g>
</g>
</symbol>

</svg>