如何设置svg路径起点？

Question

我正在开发下面的加载动画，但我遇到了问题。 我不能让心脏的stroke-dashoffset动画从心脏的顶部中心开始。为了澄清，红色“边框”动画是问题所在。它从错误的地方开始。

我在Illustrator中创建心形。

• 我制作形状http://imgur.com/a/3wziI
• 接下来，我将svg原语<circle>和<rectangle>转换为<path>，以便对它们进行动画处理。 http://imgur.com/a/sm1bG
• 我将圆形和矩形结合起来以形成心形。 http://imgur.com/a/31utR

如何才能让红色的“边框”动画从心脏开始？

body { margin: 0 }
main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
h1 {
  font-family: 'Cabin Sketch', cursive;
  font-size: 4vw;
}
svg {
  width: 25vw;
  position: relative;
  overflow: visible;
}

.circleLeft {
  fill: transparent;
  stroke: #585858;
  stroke-width: 0.5;
  stroke-dasharray: 312;
  stroke-dashoffset: 312;
  transform-origin: 59% 97%;
  animation: leftCircleAnim 6s infinite;
  animation-timing-function: cubic-bezier(0.4, -0.03, 0.82, 0.42);
}

.circleRight {
  fill: transparent;
  stroke: #585858;
  stroke-width: 0.5;
  stroke-dasharray: 312;
  stroke-dashoffset: 312;
  transform-origin: 14% 54%;
  transition: 1s ease all;
  animation: rightCircleAnim 6s infinite;
  animation-timing-function: cubic-bezier(0.4, -0.03, 0.82, 0.42);
}

.rect {
  fill: transparent;
  stroke: #585858;
  stroke-width: 0.5;
  transition: 1s ease all;
  transform-origin: 64% 57%;
  stroke-dasharray: 303;
  stroke-dashoffset: 303;
  animation: rectAnim 6s infinite;
  animation-timing-function: cubic-bezier(0.4, -0.03, 0.82, 0.42);
}

.heart {
  stroke-dasharray: 332;
  stroke-dashoffset: 332;
  transition: 1s ease-in all;
  stroke: #E21A39;
  stroke-width: 0.5;
  fill: transparent;
  animation: heartAnim 6s infinite;
  animation-timing-function: cubic-bezier(0.4, -0.03, 0.82, 0.42);
}

@keyframes rectAnim {
  0% { stroke-dashoffset: 312; }
  10% { stroke-dashoffset: 122; }
  35% { transform: rotate(0deg); }
  37% { stroke: #585858; }
  45% { transform: rotate(-45deg); stroke: #e8e8e8; }
  74% { opacity: 1 }
  75% { opacity: 0 }
  100% {
    stroke-dashoffset: 122;
    transform: rotate(-45deg);
    stroke: #e8e8e8;
    opacity: 0;
  }
}


@keyframes leftCircleAnim {
  10% { stroke-dashoffset: 312; }
  25% { stroke-dashoffset: 122; transform: translateY(0); }
  35% { transform: translateY(-22px); }
  37% { stroke: #585858; }
  45% { transform: translateY(-22px) rotate(-45deg); stroke: #e8e8e8; }
  74% { opacity: 1 }
  75% { opacity: 0 }
  100% {
    stroke-dashoffset: 122;
    transform: translateY(-22px) rotate(-45deg);
    stroke: #e8e8e8;
    opacity: 0;
  }
}

@keyframes rightCircleAnim {
  10% { stroke-dashoffset: 312; }
  25% { stroke-dashoffset: 122; transform: translateX(0); }
  35% { transform: translateX(22px); }
  37% { stroke: #585858; }
  45% { transform: translateX(22px) rotate(-45deg); stroke: #e8e8e8; }
  74% { opacity: 1 }
  75% { opacity: 0 }
  100% {
    stroke-dashoffset: 122;
    stroke: #e8e8e8;
    transform: translateX(22px) rotate(-45deg);
    opacity: 0
  }
}

@keyframes heartAnim {
  45% { stroke-dashoffset: 332; }
  55% { stroke-dashoffset: 102; }
  58% { fill: transparent; }
  65% { fill: #E21A39; }
  85% { opacity: 1; }
  95% { opacity: 0; }
  100% {
    stroke-dashoffset: 102;
    fill: #E21A39;
    opacity: 0; 
  }
}

<link href="https://fonts.googleapis.com/css?family=Cabin+Sketch" rel="stylesheet">

<main>
  <h1>Heart Creation Loading Animation</h1>
<svg viewBox="-0.5 -0.5 77.95 71.6">
  <title>heart</title>
  <path class="rect" d="M61.05,56H15.94V10.87H61.05V56Z"/>
  <path class="circleLeft" d="M15.94,33.43A22.55,22.55,0,0,0,55.85,47.84,22.56,22.56,0,0,0,34.12,11.29,22.53,22.53,0,0,0,15.94,33.43Z"/>
  <path class="circleRight" d="M15.94,33.43A22.55,22.55,0,0,0,55.85,47.84,22.56,22.56,0,0,0,34.12,11.29,22.53,22.53,0,0,0,15.94,33.43Z"/>
  <path class="heart" d="M180.09,6.55a22.89,22.89,0,0,0-25.74-4.38,22,22,0,0,0-6.11,4.4l0,0,0,0A22.54,22.54,0,0,0,110.52,25a22.64,22.64,0,0,0,5.85,13.35l0,0,31.9,31.9,31.9-31.9,0,0a21.77,21.77,0,0,0,1.65-1.8A22.83,22.83,0,0,0,180.09,6.55Z" transform="translate(-109.95 0.5)"/>
</svg>
</main>

我有一个开发版本，更容易弄乱这里的stroke-dasharray和stroke-dashoffset http://codepen.io/tryggvigy/pen/rWjZOE