我有一个 SVG绘图（请参阅代码段1），我想保留其宽高比，并且我希望沿 SVG路径设置动画（请参阅代码片段2）我想用preserveAspectRatio="none"适合我的容器div。
/* SVG drawing for which aspect ratio should be kept */
svg[id^="robot"]{
width: 90px;
position: absolute;
}
#robot1 [data-rotate]{
-webkit-animation: wheel linear infinite;
-webkit-animation-duration: 5s;
-webkit-transform-origin: 50% 50%;
}
@-webkit-keyframes wheel { from { -webkit-transform:rotate(0deg); } to { -webkit-transform:rotate(360deg); } }
.st0{ fill-rule:evenodd;clip-rule:evenodd;fill:#3C5482; }
.st1{ fill-rule:evenodd;clip-rule:evenodd;fill:#A5DFE9; }
.st2{ fill-rule:evenodd;clip-rule:evenodd;fill:#7BC7D4; }
.st3{ fill-rule:evenodd;clip-rule:evenodd;fill:#80C1D3; }
.st4{ fill-rule:evenodd;clip-rule:evenodd;fill:#889BA9; }
.st5{ fill-rule:evenodd;clip-rule:evenodd;fill:#1E3869; }
.st6{ fill:none;stroke:#FEB556;stroke-width:4.479;stroke-miterlimit:10;stroke-dasharray:12.059,12.059; }
.st7{ fill-rule:evenodd;clip-rule:evenodd;fill:#F4918C; }
.st8{ fill-rule:evenodd;clip-rule:evenodd;fill:#F5716C; }
.st9{ fill-rule:evenodd;clip-rule:evenodd;fill:#5F7D95; }
.st10{ fill-rule:evenodd;clip-rule:evenodd;fill:#5F7F94; }
.st11{ fill-rule:evenodd;clip-rule:evenodd;fill:#FEB556; }
.st12{ fill-rule:evenodd;clip-rule:evenodd;fill:#FECC85; }
.st13{ fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF; }<svg id="robot1" viewBox="0 0 291.996 384.643">
<polygon class="st5" points="145.998,306.264 145.998,208.082 170.532,208.082 170.532,216.893 174.655,216.893 174.655,223.615 170.532,223.615 170.532,226.877 174.655,226.877 174.655,233.615 170.532,233.615 170.532,236.877 174.655,236.877 174.655,243.614 170.532,243.614 170.532,246.877 174.655,246.877 174.655,253.599 170.532,253.599 170.532,256.86 174.655,256.86 174.655,263.598 170.532,263.598 170.532,266.859 174.655,266.859 174.655,273.598 170.532,273.598 170.532,306.264 "/>
<polygon class="st0" points="145.998,306.264 145.998,208.082 121.457,208.082 121.457,216.893 117.326,216.893 117.326,223.615 121.457,223.615 121.457,226.877 117.326,226.877 117.326,233.615 121.457,233.615 121.457,236.877 117.326,236.877 117.326,243.614 121.457,243.614 121.457,246.877 117.326,246.877 117.326,253.599 121.457,253.599 121.457,256.86 117.326,256.86 117.326,263.598 121.457,263.598 121.457,266.859 117.326,266.859 117.326,273.598 121.457,273.598 121.457,306.264 "/>
<rect x="145.998" y="133.193" class="st11" width="54.311" height="80.666"/>
<rect x="91.688" y="133.193" class="st12" width="54.311" height="80.666"/>
<rect x="17.309" y="88.12" class="st11" width="257.371" height="15.03"/>
<path class="st2" d="M145.998,191.254V0c52.802,0.015,95.619,42.818,95.619,95.635C241.617,148.437,198.8,191.254,145.998,191.254z"/>
<path class="st1" d="M145.998,191.254V0C93.181,0.015,50.371,42.818,50.371,95.635C50.371,148.437,93.181,191.254,145.998,191.254z"/>
<path class="st13" d="M145.998,45.852c27.498,0,49.784,22.285,49.784,49.783c0,27.483-22.286,49.769-49.784,49.769c-27.491,0-49.776-22.285-49.776-49.769C96.222,68.137,118.507,45.852,145.998,45.852z"/>
<path class="st11" d="M145.998,62.451c18.322,0,33.185,14.846,33.185,33.184c0,18.322-14.862,33.184-33.185,33.184c-18.33,0-33.184-14.861-33.184-33.184C112.814,77.297,127.668,62.451,145.998,62.451z"/>
<path class="st5" d="M145.998,72.131c12.979,0,23.505,10.518,23.505,23.504c0,12.973-10.525,23.505-23.505,23.505s-23.505-10.532-23.505-23.505C122.493,82.648,133.019,72.131,145.998,72.131z"/>
<path class="st10" data-rotate d="M203.43,326.652c0.059-1.068,0.095-2.143,0.095-3.226c0-1.088-0.037-2.166-0.096-3.239c2.181-1.688,3.379-4.494,2.871-7.399c-0.519-2.902-2.598-5.123-5.219-5.965c-0.628-2.085-1.368-4.12-2.218-6.098c1.458-2.332,1.621-5.372,0.151-7.922c-1.474-2.544-4.186-3.927-6.941-3.823c-1.293-1.727-2.69-3.367-4.165-4.937c0.585-2.695-0.3-5.618-2.552-7.52c-2.271-1.899-5.3-2.266-7.853-1.22c-1.794-1.178-3.659-2.254-5.585-3.229c-0.368-2.736-2.205-5.183-4.983-6.191c-2.771-1.009-5.745-0.314-7.787,1.543c-2.079-0.486-4.201-0.862-6.36-1.116c-1.282-2.442-3.837-4.117-6.79-4.117s-5.512,1.675-6.796,4.118c-2.158,0.254-4.278,0.629-6.356,1.116c-2.042-1.858-5.016-2.553-7.792-1.544c-2.771,1.008-4.603,3.455-4.972,6.19c-1.929,0.976-3.795,2.054-5.592,3.232c-2.553-1.049-5.587-0.685-7.85,1.217c-2.26,1.903-3.146,4.829-2.555,7.527c-1.472,1.566-2.867,3.206-4.158,4.93c-2.755-0.106-5.478,1.276-6.953,3.822c-1.474,2.555-1.311,5.602,0.158,7.935c-0.848,1.973-1.584,4.003-2.21,6.081c-2.623,0.841-4.705,3.063-5.219,5.969c-0.515,2.909,0.686,5.72,2.87,7.406c-0.06,1.07-0.096,2.147-0.096,3.232c0,1.081,0.036,2.153,0.095,3.22c-2.184,1.687-3.384,4.496-2.869,7.405c0.514,2.903,2.596,5.134,5.217,5.975c0.626,2.078,1.362,4.107,2.209,6.08c-1.466,2.332-1.627,5.377-0.155,7.93c1.474,2.556,4.194,3.934,6.948,3.825c1.292,1.726,2.688,3.365,4.162,4.933c-0.589,2.701,0.297,5.63,2.556,7.521c2.262,1.9,5.294,2.266,7.847,1.218c1.797,1.18,3.665,2.258,5.595,3.233c0.37,2.735,2.201,5.18,4.971,6.188c2.776,1.01,5.75,0.313,7.792-1.544c2.077,0.486,4.196,0.86,6.353,1.114c1.282,2.448,3.844,4.119,6.8,4.119c2.955,0,5.513-1.671,6.793-4.118c2.158-0.254,4.278-0.628,6.356-1.114c2.042,1.856,5.017,2.552,7.787,1.543c2.777-1.008,4.613-3.453,4.983-6.188c1.927-0.975,3.793-2.052,5.588-3.229c2.552,1.043,5.58,0.677,7.85-1.222c2.251-1.89,3.137-4.814,2.553-7.514c1.476-1.569,2.875-3.212,4.169-4.94c2.754,0.105,5.463-1.272,6.936-3.825c1.469-2.548,1.308-5.586-0.147-7.917c0.85-1.977,1.589-4.012,2.217-6.096c2.62-0.843,4.698-3.072,5.217-5.972C206.809,331.146,205.611,328.34,203.43,326.652z"/>
<path class="st2" d="M145.998,369.293v-91.748h0.297c25.197,0.152,45.585,20.639,45.585,45.881c0,25.229-20.388,45.715-45.585,45.867H145.998z"/>
<path class="st1" d="M145.998,369.293v-91.748h-0.297c-25.205,0.152-45.585,20.639-45.585,45.881c0,25.229,20.38,45.715,45.585,45.867H145.998z"/>
<path class="st11" d="M145.998,306.112c9.558,0,17.301,7.758,17.301,17.314c0,9.559-7.743,17.301-17.301,17.301s-17.309-7.742-17.309-17.301C128.689,313.87,136.44,306.112,145.998,306.112z"/>
<path class="st10" d="M96.214,95.643c0-27.498,22.285-49.783,49.776-49.783c27.498,0,49.784,22.285,49.784,49.783"/>
<circle class="st2" cx="17.305" cy="95.643" r="17.305"/>
<circle class="st2" cx="274.68" cy="95.635" r="17.305"/>
</svg>
#path {
height: 100%;
width: 100%;
}<!-- SVG path along which to animate, this should be stretched to fit the container div -->
<svg id="path" viewBox="0 0 819.082 996.1" preserveAspectRatio="none">
<path id="thePath" d="M819.082,696.1c0,165.686-134.314,300-300,300H300c-165.686,0-300-134.314-300-300V300 C0,134.315,134.314,0,300,0h219.082c165.686,0,300,134.315,300,300V696.1z" />
</svg>
在标准情况下，我会使用svg标记animateMotion来完成此任务：
<animateMotion dur="6s" repeatCount="indefinite">
<mpath xlink:href="#thePath"/>
</animateMotion>
但是，我想要遵循的路径必须包含在单独的<svg></svg>中，因为我希望它被拉伸到父div而不是绘图。
我该如何做到这一点？
如果解决方案是纯SVG / CSS，那将是理想的，但如果它需要一些JavaScript，那也没关系。请不要jQuery。