svg 动画不遵循定义的路径，移动不规律答案

【问题标题】：svg animation not following defined path, moving erraticallysvg 动画不遵循定义的路径，移动不规律
【发布时间】：2018-01-18 13:29:17
【问题描述】：

我创建了一个 svg 并试图沿路径移动一个圆形元素。我将路径添加到 svg 中，以确保它出现在正确的位置并且确实如此。但是，当使用偏移路径时，对象不会沿着提供的路径移动，而是在页面上不规则地移动。

我的模型基于this pen，但my pen 不成功。

代码：

body{
  max-width: 400px;
  box-sizing: border-box;
}

#vine-tomatoes circle:first-of-type {
  animation: move 5s infinite linear;
    offset-path: path("M264,29.7 L270,29.7 L256,29.7 C257.9,30.5 260.9,31.5 264.6,31.5 C266.7,31.5 266.6,52.3 265,63 C256.7,57.3 249.7,55.9 244,56.3 C212.3,58.6 185.1,120.6 173.3,209.7");
}
#vine-tomatoes circle:nth-of-type(4) {
  animation: get-hit 2s linear infinite .4s; /* 2s * .2 =  */
}
@keyframes move {
  0% {
    offset-distance: 0;
  }
  100% {
    offset-distance: 100%;
  }
}
/* @keyframes wiggle-drop-bounce {
  5% {transform: translateX(-1%);}
  10% {transform: translateX(1%);}
  20% {transform: translateX(0) translateY(10%);}
  30% {transform: translateX(-5%) translateY(8%);}
  60% {transform: translateX(-15%) translateY(20%);}
  100% {transform: translateX(-30%) translateY(45%);}
} */

@keyframes get-hit {
  0% {transform: translateX(1%);}
  40% {transform: translateX(0);}
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 452 390">
  <defs><radialGradient cx="50%" fx="50%" fy="50%" r="50%" id="a"><stop stop-color="#453125" offset="0%"/><stop stop-color="#342419" offset="100%"/></radialGradient></defs>
  <path d="M93.9 315.69c49.48 3.07 90 29.27 134.07 58.7 8.67 4.43 18.79 6.84 26.91 10.63a174.8 174.8 0 0 0 93.2-4.56c65.86-22.21 120.65-99.15 99.19-177a145.07 145.07 0 0 0-14.3-31.7c-17.88-29.61-45.82-52.23-77.34-60a221.84 221.84 0 0 0-35.8-6.56c-37.13-4-75.66-1.89-111.28-3-15.69.51-32.08 1.43-48.33 3.2a333.48 333.48 0 0 0-35.11 4c-17.55 3-35.07 7.48-51.6 14.36-19.27 8.53-38.78 21-52.85 37.38C6.59 177.52-2.06 198.01.42 222.57c3.19 23.55 13.82 43.39 28.2 59.51 14.16 18 34.94 28.31 57.23 31.85 2.44.59 5.13 1.16 8.05 1.76z" fill="#F0F9EC"/>
  <path d="M310.08 203.3c-39.44-2.19-71.72-20.82-106.87-41.75-6.92-3.15-15-4.86-21.45-7.56a155.6 155.6 0 0 0-74.3 3.24c-52.5 15.8-96.18 70.51-79.07 125.87a98.14 98.14 0 0 0 11.4 22.52c14.25 21.06 36.52 37.14 61.69 42.68a194.77 194.77 0 0 0 28.53 4.66c29.6 2.84 60.31 1.35 88.71 2.1 12.51-.36 25.57-1 38.52-2.27 9-.49 18.43-1.38 28-2.82a210.08 210.08 0 0 0 41.09-10.21c15.36-6.07 30.91-14.91 42.13-26.59 11.22-11.68 18.11-26.22 16.14-43.68-2.54-16.75-11-30.86-22.48-42.32-11.29-12.83-27.85-20.13-45.63-22.65-1.94-.387-4.077-.793-6.41-1.22z" fill="#6CC049"/>
  <path d="M307.78 237.26a35 35 0 1 1-34.8 35 34.9 34.9 0 0 1 34.8-35z" fill="url(#a)"/>
  <g fill="none">
    <path d="M282.98 73.26c6-13 18-11 18-11M282.98 125.26c6-13 18-11 18-11" stroke="#6CC049" stroke-width="5"/>
    <path d="M258.48 27.26s-.44-25.25 22.25-24.75 22.25 24.75 22.25 24.75v248.5" stroke="#6CC049" stroke-width="5"/>
    <path d="M302.98 32.26s12-2 18 11M303.98 82.26s12-2 18 11" stroke="#6CC049" stroke-width="5"/>
  </g>
  <path fill="#CCB7A5" d="M309.48.76h5v275h-5z"/> 
  <path d="M291.85 208.76c-7.85 6.42 11.17 8.33 11.17 8.33s-3.54-14.53-11.17-8.33zm0-40c-7.85 6.42 11.17 8.33 11.17 8.33s-3.54-14.53-11.17-8.33zm-17-53c-7.85 6.42 11.17 8.33 11.17 8.33s-3.54-14.53-11.17-8.33zm-4-52c-7.85 6.42 11.17 8.33 11.17 8.33s-3.54-14.53-11.17-8.33zm60.26 21c-7.62-6.23-11.17 8.33-11.17 8.33s19.02-1.88 11.17-8.33zm-16 73c-7.62-6.23-11.17 8.33-11.17 8.33s19.02-1.88 11.17-8.33zm16-133c-7.62-6.23-11.17 8.33-11.17 8.33s19.02-1.88 11.17-8.33z" fill="#6CC049"/>
  <g fill="#F42434" id="vine-tomatoes">
        <path d="M264,29.7 L270,29.7 L256,29.7 C257.9,30.5 260.9,31.5 264.6,31.5 C266.7,31.5 266.6,52.3 265,63 C256.7,57.3 249.7,55.9 244,56.3 C212.3,58.6 185.1,120.6 173.3,209.7" id="Shape" stroke="#444" stroke-width="1px" fill="none"></path>
    <circle cx="263" cy="31" r="20"/>
    <circle cx="330" cy="51" r="20"/>
    <circle cx="330" cy="111" r="20"/>
    <circle cx="273" cy="90" r="20"/>
    <circle cx="275" cy="141" r="20"/>
  </g>
  <circle cx="190" cy="255" r="20" fill="#F42434"/>
  <circle cx="190" cy="219" r="20" fill="#F42434"/>
  <circle cx="163" cy="260" r="20" fill="#FFB718"/>
  <circle cx="113" cy="218" r="20" fill="#FFB718"/>
  <circle cx="123" cy="260" r="20" fill="#FFB718"/>
  <circle cx="141" cy="226" r="20" fill="#F42434"/>
  <circle cx="141" cy="260" r="20" fill="#F42434"/>
  <circle cx="163" cy="214" r="20" fill="#FFB718"/>
  <path fill="#CCB7A5" fill-rule="nonzero" d="M201.48 209.76h25v85h-25zM81.48 209.76h25v85h-25zM81.48 296.76h145v10h-145z"/>
  <path fill="#FFF" fill-rule="nonzero" d="M76.48 270.76h155v30h-155zM76.48 224.76h155v30h-155z"/>
  <path d="M215.48 283.26a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zm0-40a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm-122 40a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zm0-45a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z" fill="#CCB7A5"/>
</svg>

【问题讨论】：

标签： css svg css-animations

【解决方案1】：

似乎path CSS 函数中的 Path 命令是相对于目标位置的，即使您使用了这些命令的大写绝对版本...

我不得不承认我不知道这个函数，也无法判断它是否是 Blink 中的错误（目前还只有实现者）。

但要进行修复，请将您的<circle> 的cx 和cy 设置为0，或者重写路径数据，使其相对于圆的位置。

body{
  max-width: 400px;
  box-sizing: border-box;
}

circle {
  animation: move 5s infinite linear;
    offset-path: path("M264,29.7 L270,29.7 L256,29.7 C257.9,30.5 260.9,31.5 264.6,31.5 C266.7,31.5 266.6,52.3 265,63 C256.7,57.3 249.7,55.9 244,56.3 C212.3,58.6 185.1,120.6 173.3,209.7");
}
@keyframes move {
  0% {
    offset-distance: 0;
  }
  100% {
    offset-distance: 100%;
  }
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 452 390">
   <path d="M264,29.7 L270,29.7 L256,29.7 C257.9,30.5 260.9,31.5 264.6,31.5 C266.7,31.5 266.6,52.3 265,63 C256.7,57.3 249.7,55.9 244,56.3 C212.3,58.6 185.1,120.6 173.3,209.7" id="Shape" stroke="#444" stroke-width="1px" fill="none"></path>
    <circle cx="0" cy="0" r="20"/>
</svg>

【讨论】：

@sage915 注意只有 Blink 确实支持这个属性，你可能会更好地使用 SMIL 来制作这样的动画，同时使用 js polyfill 来制作 IE。