SVG心碎

Question

哪里可以找到破碎的心脏SVG格式？ 当我点击破碎的心脏时，我需要两层原因这个层结合起来并且结果需要一个好心脏＆lt; 3

我画了一些心，但无法生气:(

<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

移动右侧的动画：

＆＃13;

＆＃13;

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

另外两个设置倾向

＆＃13;

＆＃13;

#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);}  
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;