如何将 @keyframes 声明内联到 HTML/SVG 中？

Question

好的，我有一个“我爱你”动画的 HTML 代码。我在将其调整为内联代码时遇到了一些困难。

这有可能吗？

.heart {
  fill: red;
  position: relative;
  top: 5px;
  width: 50px;
  animation: pulse 1s ease infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

I 

<svg class="heart" viewBox="0 0 32 29.6">
  <path d="M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.2
    c6.1-9.3,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z"/>
</svg> 

You

Answer 1

您可以像下面这样尝试使用纯 SVG 并且没有外部 CSS（仅内联）

I 

<svg class="heart" viewBox="0 0 32 29.6" width="50" style="overflow:visible;position: relative;top: 5px;">
<g transform-origin="center">
 <path d="M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.2
    c6.1-9.3,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z" fill="red"/>
      <animateTransform attributeName="transform"
                type="scale"
                keyTimes="0;0.5;1" values="1;1.3;1"
                dur="1s" repeatCount="indefinite"/>
                
    </g>
</svg> 

You