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

Answer 2

您可以将样式包含在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

Answer 3

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

accept-ranges: bytes
access-control-allow-methods: GET, PUT, POST
access-control-allow-origin: *
age: 13127
content-length: 523
content-type: application/x-mpegURL
date: Thu, 04 Jul 2019 14:59:42 GMT
etag: "xxxxxx416be945db1e53056"
last-modified: Mon, 01 Jul 2019 09:58:35 GMT
server: AmazonS3
status: 304
vary: Origin
via: 1.1 xxxx89f8fad65fe7a4.cloudfront.net (CloudFront)
x-amz-cf-id: xxxxxtg6Ys3VBT8XOw9spA==
x-amz-cf-pop: xxx54-C1
x-cache: Hit from cloudfront

Answer 4

您可以将关键帧和CSS放在svg内的styles标记内。喜欢这里

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

但是内联无法完成。

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

4 个答案: