SVG 破碎的心

Question

我在哪里可以找到破碎的心 SVG 格式？ 我需要两层，因为当我点击破碎的心时，这层结合起来，结果想要一颗好心

我画了心但不能动画:(

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-43 46 12 10" style="enable-background:new -43 46 12 10;" xml:space="preserve">

  <path d="M-37,47.5c0.7-0.9,2.1-1.5,3.3-1.5c2,0,2.7,1.5,2.7,3.4c0,3.3-6,6.6-6,6.6l0-4.9c0,0-2-2.1-2-2.1L-37,47.5z" />

  <path d="M-37,47.5c-0.7-0.9-2.1-1.5-3.3-1.5c-2,0-2.7,1.5-2.7,3.4c0,3.3,6,6.6,6,6.6l0-4.9c0,0-2-2.1-2-2.1L-37,47.5z" />

</svg>

有什么想法吗？

Answer 1

向右移动的动画：

#right {
  animation: move 2s infinite alternate;  
  fill: red;
}

@keyframes move {
 0% {transform: translateX(2px);}  
 100% {transform: translateX(0px);}  
}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-43 46 12 10" style="enable-background:new -43 46 12 10;" xml:space="preserve">

  <path id="right" d="M-37,47.5c0.7-0.9,2.1-1.5,3.3-1.5c2,0,2.7,1.5,2.7,3.4c0,3.3-6,6.6-6,6.6l0-4.9c0,0-2-2.1-2-2.1L-37,47.5z" />

  <path d="M-37,47.5c-0.7-0.9-2.1-1.5-3.3-1.5c-2,0-2.7,1.5-2.7,3.4c0,3.3,6,6.6,6,6.6l0-4.9c0,0-2-2.1-2-2.1L-37,47.5z" />

</svg>

另一种设置倾斜度

#right {
  animation: moveRight 2s infinite alternate;  
  transform-origin: 0% 100%;
  fill: red;
}

@keyframes moveRight {
 0% {transform: rotate(25deg);}  
 100% {transform: rotate(0deg);}  
}

#left {
  animation: moveLeft 2s infinite alternate;  
  transform-origin: 100% 100%;
  fill: red;
}

@keyframes moveLeft {
 0% {transform: rotate(-25deg);}  
 100% {transform: rotate(0deg);}  
}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-43 46 12 10" style="enable-background:new -43 46 12 10;" xml:space="preserve">

  <path id="right" d="M-37,47.5c0.7-0.9,2.1-1.5,3.3-1.5c2,0,2.7,1.5,2.7,3.4c0,3.3-6,6.6-6,6.6l0-4.9c0,0-2-2.1-2-2.1L-37,47.5z" />

  <path id="left" d="M-37,47.5c-0.7-0.9-2.1-1.5-3.3-1.5c-2,0-2.7,1.5-2.7,3.4c0,3.3,6,6.6,6,6.6l0-4.9c0,0-2-2.1-2-2.1L-37,47.5z" />

</svg>