Решение SMIL-Free для анимации CSS в скопированных SVG-элементах

После нескольких дней исследования SVG для Интернета попробуйте использовать SMIL, но, наконец, отказаться от него (хотя это довольно удивительно, Microsoft отказывается его поддерживать - даже на Edge) и Google планирует отбросить его из хрома тоже.Решение SMIL-Free для анимации CSS в скопированных SVG-элементах

Итак, я планирую сделать это с помощью анимации CSS .. он работает почти отлично, но есть большая проблема: анимации не будут копироваться в копии элемента, поэтому Я бы воссоздать элемент снова и снова на странице:

Мой Sampe Код:

@keyframes rotate { 
 
    0% {transform: rotate(0deg)} 
 
    100% {transform: rotate(360deg)} 
 
} 
 

 

 
@keyframes breathe { 
 
    0% {transform: scale(1)} 
 
    50% {transform: scale(1.1)} 
 
    100% {transform: scale(1)} 
 
} 
 

 
#square1 { 
 
\t transform-origin: 50% 50%; 
 
\t animation: rotate 1s linear infinite; 
 
} 
 

 
#square2 { 
 
\t transform-origin: 50% 50%; 
 
\t animation: rotate 2s linear infinite; 
 
} 
 

 

 
#squares { 
 
    animation: breathe 3s infinite; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<div> 
 
    <h3>This is animated</h3> 
 
<svg id="squares"> 
 
    <rect id="square1" x="10" y="20" fill="red" width="50" height="50"></rect> 
 
    <rect id="square2" x="70" y="20" fill="darkred" width="50" height="50"></rect> 
 
    <rect id="square3" x="130" y="20" fill="black" width="50" height="50"></rect> 
 
    <rect id="square4" x="190" y="20" fill="gray" width="50" height="50"></rect> 
 
    <rect id="square5" x="250" y="20" fill="green" width="50" height="50"> </rect> 
 
</svg> 
 
    </div> 
 
    <div> 
 
    <h3>Animations from parent element will not replicate into it's copies. <br> 
 
     This should be animated, but it isn't :(</h3> 
 
    <svg id="testb"> 
 
     <use xlink:href="#squares"></use> 
 
    </svg> 
 
    </div> 
 
    
 
</body> 
 
</html>

Нет, видимо, это не происходит, потому что браузер не «обновить» скопированный элемент в соответствии с родителем, анимация относится к родителю, но копия просто тянет один кадр из него. Как я мог сделать эту работу?

источник

2016-06-27 raphadko

для CSS селекторов вы можете использовать фактически узел типа вместо идентификатора? Поэтому '# squares' или' # squares1' просто станет 'rect {/ * ani style здесь * /}' – zgood

, который можно использовать, да, но эффект не будет копироваться во второй экземпляр. – raphadko

Как вы делаете копии своих «прямых»? через javascript? если бы вы могли поделиться этим кодом? извините, если я неправильно понимаю проблему – zgood

Я предлагаю сделать анимацию вращения в классы.

.square1-rotate { 
    transform-origin: 50% 50%; 
    animation: rotate 1s linear infinite; 
} 

.square2-rotate { 
    transform-origin: 50% 50%; 
    animation: rotate 2s linear infinite; 
} 

.squareBreathe { 
    animation: breathe 3s infinite; 
}

, а затем добавить этот класс в "использовать" заявление ала:

<use xlink:href="#squares" class="squareBreathe"></use>

непроверенного мной! Просто быстрый ответ. А затем

<rect id="square1" class="square1-rotate" x="10" y="20" fill="red" width="50" height="50"></rect>

чтобы посмотреть, будет ли # square1 вращаться. Если нет, вы можете попробовать включить атрибут стиля в квадрат1, который ссылается на анимацию. Надеюсь это поможет.

Марк

источник

2016-06-27 19:47:22 Mark

Попробуйте <use> с <defs> и <animateTransform>. НЕТ CSS тоже требуется.

Примечание: Chrome вращает первые 2 окна, а FF пропускает вращение. IE ничего не показывает. Возможно, лучше всего использовать javascript-кодирование для поддержки всех трех браузеров.

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<div> 
 
    <h3>This is animated</h3> 
 
<svg id="squares"> 
 
     <!-- list resourses in a <defs> element --> 
 
    <defs> 
 
     <rect id="my_rect" 
 
      x="10" y="10" 
 
      width="50" height="50" 
 
      > 
 

 
     </rect> 
 
     
 
     <rect id="my_rect2" 
 
      x="10" y="10" 
 
      width="50" height="50" 
 
      > 
 

 
     </rect>  
 
     
 
    </defs> 
 
    
 
<g > 
 
    <use xlink:href="#my_rect" fill="red" >   <animateTransform 
 
      attributeName="transform" type="rotate" 
 
      values="0 35 35; 360 35 35" 
 
      additive="sum" 
 
      dur="1s" 
 
      repeatCount="indefinite" /> </use> 
 
    <use xlink:href="#my_rect" transform="translate(60,0)" fill="darkred" > <animateTransform 
 
      attributeName="transform" type="rotate" 
 
      values="0 35 35; 360 35 35" 
 
      additive="sum" 
 
      dur="1s" 
 
      repeatCount="indefinite" /> </use> 
 
    <use xlink:href="#my_rect2" transform="translate(120,0)" fill="black"></use> 
 
    <use xlink:href="#my_rect2" transform="translate(180,0)" fill="gray" ></use> 
 
    <use xlink:href="#my_rect2" transform="translate(240,0)" fill="green" > </use> 
 
    
 
      <animateTransform 
 
      attributeName="transform" type="scale" 
 
      values="0.9; 1; 0.9" 
 
      dur="2s" 
 
      repeatCount="indefinite" /> 
 
    </g> 
 
</svg> 
 
    </div> 
 
    <div> 
 
    <h3> 
 
     This should be animated too</h3> 
 
    <svg id="testb"> 
 
     <use xlink:href="#squares"></use> 
 
    </svg> 
 
    </div> 
 
    
 
</body> 
 
</html>

источник

2016-06-28 08:34:55

Решение SMIL-Free для анимации CSS в скопированных SVG-элементах

ответ

Смежные вопросы