2

Я графический дизайнер, который хочет научиться программировать :) Мне нужно найти способ вызывать анимацию через data-names. Я обнаружил, что это работает для дочернего элемента, но не работает для родительского элемента, но я не могу понять, почему.
Если я меняю data-names с помощью класса, он работает отлично, но в силу обстоятельств я должен использовать только data-names.

Подскажите, почему это не работает?

Я знаю, что могу анимировать дочерние элементы по отдельности, чтобы получить тот же эффект, но я думаю, что было бы неплохо узнать, в чем проблема на будущее. Пожалуйста, проверьте строки 5,6(стили) и 41 (g).

<svg id="ed60e92c-8023-4b4e-a257-3580dabca02a" data-name="action_arrow2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 119.52 119.52"><defs>
  <style type="text/css">
    .bf17fc5c-7924-499b-959f-404e7a5d6c84{fill:none;}.a6702ecc-977e-4ec2-8add-47217594510b{fill:yellow;}.fbbc3ad0-37ae-41ab-8c9e-860970eb1313{fill:black;}
    
<!--  g [data-name="action_arrow2"] { Doesn't work -->
  .action_arrow2 {
      animation: 6s infinite;
      animation-name: arrow2_animation;
      transform-origin: 50% 50%;}
@keyframes arrow2_animation {
      0% { transform: rotate(-45deg); }
      50% { transform: rotate(45deg); }
     100%  { transform: rotate(-45deg); }}
  
  
  g [data-name="clockwise"] {
      animation: 6s infinite;
      animation-name: clockwise_animation;
      transform-origin: 50% 50%;}
@keyframes clockwise_animation {
      0% { opacity: 1; }
      47% { opacity: 1; }
      50% { opacity: 0; }
      97% { opacity: 0; }
     100%  { opacity: 1; }}
  
  
   g [data-name="counterclockwise"] {
      animation: 6s infinite;
      animation-name: counter_animation;
      transform-origin: 50% 50%;}
@keyframes counter_animation {
      0% { opacity: 0; }
      47% { opacity: 0; }
      50% { opacity: 1; }
      97% { opacity: 1; }
     100%  { opacity: 0; } }
  </style>
  </defs>
  
  <g id="aeee668b-21ac-41e3-b248-485eb27a0a1b" data-name="action_arrow2" class="action_arrow2">
    <circle id="b4485f64-ea17-46a9-bfb3-7702974cac03" data-name="frame" class="bf17fc5c-7924-499b-959f-404e7a5d6c84" cx="59.76" cy="59.76" r="59.74"/>
    
  <g id="a6f987a9-6dfa-4dd8-80b8-eecc39586c4c" data-name="circle_transparent">
  <path id="a0aa0306-a048-4ba8-8272-84096ecec18f" data-name="circle" class="a6702ecc-977e-4ec2-8add-47217594510b" d="M34.32,28.39a40.83,40.83,0,1,1-5.76,57.46A40.88,40.88,0,0,1,34.32,28.39ZM83.49,88.52a36.84,36.84,0,1,0-51.84-5.2A36.9,36.9,0,0,0,83.49,88.52Z" transform="translate(-0.41 -0.24)"/>
    
    
  <g id="a6bb816d-4d36-49e6-8262-1145b3d71b2a" data-name="clockwise">
        <circle id="eedbf415-6006-412e-a444-1528a8300e18" data-name="frame" class="bf17fc5c-7924-499b-959f-404e7a5d6c84" cx="59.76" cy="59.76" r="59.74"/>
        <path id="e1f5490c-6a8d-44b8-8037-690f3b52b4d6" data-name="clockwise2" class="fbbc3ad0-37ae-41ab-8c9e-860970eb1313" d="M28.7,79.22A36.66,36.66,0,0,1,26.08,46l3.37,2,.15-12L19.16,41.88l3.46,2a40.66,40.66,0,0,0,2.66,37.38C26.2,82.81,29.52,80.57,28.7,79.22Z" transform="translate(-0.41 -0.24)"/>
        <path id="b89a253a-bf5f-41b1-853f-ff16fbdae36a" data-name="clockwise1" class="fbbc3ad0-37ae-41ab-8c9e-860970eb1313" d="M91.75,40.89a36.66,36.66,0,0,1,2.62,33.23l-3.37-2-.15,12,10.44-5.86-3.46-2a40.61,40.61,0,0,0-2.67-37.37C94.25,37.31,90.93,39.54,91.75,40.89Z" transform="translate(-0.41 -0.24)"/>
   </g>
    
   <g id="ad441e68-0db6-43d4-b7b7-ab1edf7c8b4d" data-name="counterclockwise">
        <circle id="ac342f71-48ac-449a-9aab-4699d3dd8ca4" data-name="frame" class="bf17fc5c-7924-499b-959f-404e7a5d6c84" cx="59.76" cy="59.76" r="59.74"/>
        <path id="b9bdcf1a-9445-47b5-98dc-0c6920da0731" data-name="counterclockwise1" class="fbbc3ad0-37ae-41ab-8c9e-860970eb1313" d="M91.73,79.14A36.67,36.67,0,0,0,94.24,45.9l-3.36,2-.19-12,10.46,5.82L97.7,43.83a40.63,40.63,0,0,1-2.55,37.38C94.24,82.72,90.91,80.49,91.73,79.14Z" transform="translate(-0.41 -0.24)"/>
        <path id="a9e3bd80-2516-438c-8f1e-55b8e13567ad" data-name="counterclockwise2" class="fbbc3ad0-37ae-41ab-8c9e-860970eb1313" d="M28.55,41A36.67,36.67,0,0,0,26,74.25l3.37-2,.18,12L19.14,78.38l3.45-2.06a40.67,40.67,0,0,1,2.54-37.39C26.05,37.43,29.37,39.66,28.55,41Z" transform="translate(-0.41 -0.24)"/>
   </g>
</g> </g>
</svg>

Свободный перевод вопроса CSS animation works through class but doesn't work through data-name for parent element от участника @Sonador.

1

1 ответ 1

4

Если вы хотите настроить таргетинг на элемент g с помощью data-name="counterclockwise", используйте:

g[data-name="counterclockwise"]{

Вместо:

g [data-name="counterclockwise"] {

(или полностью опустите g :)

[data-name="counterclockwise"] {

Пробел в css означает «дочерний селектор» - https://css-tricks.com/whats-the-difference.

<svg id="ed60e92c-8023-4b4e-a257-3580dabca02a" data-name="action_arrow2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 119.52 119.52"><defs>
  <style type="text/css">
    .bf17fc5c-7924-499b-959f-404e7a5d6c84{fill:none;}.a6702ecc-977e-4ec2-8add-47217594510b{fill:yellow;}.fbbc3ad0-37ae-41ab-8c9e-860970eb1313{fill:black;}
    
g[data-name="action_arrow2"] {
      animation: 6s infinite;
      animation-name: arrow2_animation;
      transform-origin: 50% 50%;
 }

    @keyframes arrow2_animation {
      0% { transform: rotate(-45deg); }
      50% { transform: rotate(45deg); }
     100%  { transform: rotate(-45deg); }
    }
  
  
  g[data-name="clockwise"] {
      animation: 6s infinite;
      animation-name: clockwise_animation;
      transform-origin: 50% 50%;}
@keyframes clockwise_animation {
      0% { opacity: 1; }
      47% { opacity: 1; }
      50% { opacity: 0; }
      97% { opacity: 0; }
     100%  { opacity: 1; }}
  
  
   g[data-name="counterclockwise"] {
      animation: 6s infinite;
      animation-name: counter_animation;
      transform-origin: 50% 50%;}
@keyframes counter_animation {
      0% { opacity: 0; }
      47% { opacity: 0; }
      50% { opacity: 1; }
      97% { opacity: 1; }
     100%  { opacity: 0; } }
  </style>
  </defs>
  
  <g id="aeee668b-21ac-41e3-b248-485eb27a0a1b" data-name="action_arrow2" class="action_arrow2">
    <circle id="b4485f64-ea17-46a9-bfb3-7702974cac03" data-name="frame" class="bf17fc5c-7924-499b-959f-404e7a5d6c84" cx="59.76" cy="59.76" r="59.74"/>
    
  <g id="a6f987a9-6dfa-4dd8-80b8-eecc39586c4c" data-name="circle_transparent">
  <path id="a0aa0306-a048-4ba8-8272-84096ecec18f" data-name="circle" class="a6702ecc-977e-4ec2-8add-47217594510b" d="M34.32,28.39a40.83,40.83,0,1,1-5.76,57.46A40.88,40.88,0,0,1,34.32,28.39ZM83.49,88.52a36.84,36.84,0,1,0-51.84-5.2A36.9,36.9,0,0,0,83.49,88.52Z" transform="translate(-0.41 -0.24)"/>
    
    
  <g id="a6bb816d-4d36-49e6-8262-1145b3d71b2a" data-name="clockwise">
        <circle id="eedbf415-6006-412e-a444-1528a8300e18" data-name="frame" class="bf17fc5c-7924-499b-959f-404e7a5d6c84" cx="59.76" cy="59.76" r="59.74"/>
        <path id="e1f5490c-6a8d-44b8-8037-690f3b52b4d6" data-name="clockwise2" class="fbbc3ad0-37ae-41ab-8c9e-860970eb1313" d="M28.7,79.22A36.66,36.66,0,0,1,26.08,46l3.37,2,.15-12L19.16,41.88l3.46,2a40.66,40.66,0,0,0,2.66,37.38C26.2,82.81,29.52,80.57,28.7,79.22Z" transform="translate(-0.41 -0.24)"/>
        <path id="b89a253a-bf5f-41b1-853f-ff16fbdae36a" data-name="clockwise1" class="fbbc3ad0-37ae-41ab-8c9e-860970eb1313" d="M91.75,40.89a36.66,36.66,0,0,1,2.62,33.23l-3.37-2-.15,12,10.44-5.86-3.46-2a40.61,40.61,0,0,0-2.67-37.37C94.25,37.31,90.93,39.54,91.75,40.89Z" transform="translate(-0.41 -0.24)"/>
   </g>
    
   <g id="ad441e68-0db6-43d4-b7b7-ab1edf7c8b4d" data-name="counterclockwise">
        <circle id="ac342f71-48ac-449a-9aab-4699d3dd8ca4" data-name="frame" class="bf17fc5c-7924-499b-959f-404e7a5d6c84" cx="59.76" cy="59.76" r="59.74"/>
        <path id="b9bdcf1a-9445-47b5-98dc-0c6920da0731" data-name="counterclockwise1" class="fbbc3ad0-37ae-41ab-8c9e-860970eb1313" d="M91.73,79.14A36.67,36.67,0,0,0,94.24,45.9l-3.36,2-.19-12,10.46,5.82L97.7,43.83a40.63,40.63,0,0,1-2.55,37.38C94.24,82.72,90.91,80.49,91.73,79.14Z" transform="translate(-0.41 -0.24)"/>
        <path id="a9e3bd80-2516-438c-8f1e-55b8e13567ad" data-name="counterclockwise2" class="fbbc3ad0-37ae-41ab-8c9e-860970eb1313" d="M28.55,41A36.67,36.67,0,0,0,26,74.25l3.37-2,.18,12L19.14,78.38l3.45-2.06a40.67,40.67,0,0,1,2.54-37.39C26.05,37.43,29.37,39.66,28.55,41Z" transform="translate(-0.41 -0.24)"/>
   </g>
</g> </g>
</svg>

Свободный перевод ответа от участника @spassvogel.

1
  • @Sevastopol' посмотри этот топик. Похоже ты подобное искал data-names в SVG 18 апр 2021 в 9:17

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.