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

Posted 2023-03-06

【中文标题】如何将我的 @keyframes 声明内联到我的 HTML/SVG 中？

【英文标题】：How can I put my @keyframes declaration inline in my HTML/SVG?

【发布时间】：2019-11-15 08:45:54

【问题描述】：

好的，所以我有一个 我爱你 动画的 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

【问题讨论】：

您不能将动画作为内联样式。

@Paulie_D 不知道。这就是为什么我一直用头撞墙好几分钟。谢谢。

@weegee 分号对于 CSS 选择器声明中的最后一个属性-值对不是必需的，因此不存在不是错误。

@TylerH 不，最后一个属性不需要分号。但是逗号会导致该行浏览器无法识别，因此会失败。因此，这是一个错字问题 - 除了“内联”问题之外，

@Paulie_D 首先，逗号是转录到 Stack Overflow 时的拼写错误，OP 在近 30 分钟前纠正了该错误，所以，不，这仍然不是拼写错误。其次，我正在处理 weegee 的（现已删除）评论，该评论说它不起作用因为它在最后一行缺少分号，这是一个不正确的声明。

【参考方案1】：

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

I 

<svg class="heart" viewBox="0 0 32 29.6"  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

【参考方案2】：

您可以将关键帧和 css 放在 svg 中的样式标签内。喜欢这里

<svg">
   <style type="text/css">
     .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); 
     
  </style>
</svg>

https://codepen.io/shshaw/pen/WvYJQP.

但是内联不能做。

【参考方案3】：

您可以使用范围样式。它只会影响他的直接父母和内容。

I 

<svg class="heart" viewBox="0 0 32 29.6">
<style scoped>
.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); 

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

【讨论】：

你测试了吗？

是的，我经常在广告内容中使用它。

这不起作用：jsfiddle.net/bkv3ufds 有一段时间没有更多的作用域 CSS

【参考方案4】：

您可以将样式包含在 svg 元素本身中：

I

<svg class="heart" viewBox="0 0 32 29.6">
  <style>
    .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); 
    
  </style>
  <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