Как я могу вставить свою декларацию @keyframes в мой HTML / SVG? - PullRequest
Новая
       17

Как я могу вставить свою декларацию @keyframes в мой HTML / SVG?

2 голосов
/ 04 июля 2019

Хорошо, у меня есть этот HTML-код для анимации I Love You . И у меня трудное время, чтобы настроить его как встроенный код.

Возможно ли это как-нибудь? 

.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

Ответы [ 4 ]

1 голос
/ 04 июля 2019

Вы можете попробовать как ниже с чистым 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
0 голосов
/ 04 июля 2019

Вы можете использовать стиль области. Это повлияет только на его непосредственного родителя и содержание. 

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
0 голосов
/ 04 июля 2019

Вы можете поместить ключевой кадр и 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.

Но встроенное не может быть сделано.

0 голосов
/ 04 июля 2019

Вы можете включить стиль в сам элемент 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
...