Есть ли способ запустить svg на клик?

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"width="450px" height="450px" viewBox="0 0 450 450" style="enable-background:new 0 0 450 450;" xml:space="preserve"> 
      <style type="text/css"> 
       .st0{fill:#FFFFFF;} 
       .st1{fill:none;stroke:#000000;stroke-miterlimit:10;} 
      </style> 
      <rect id="1" x="299.8" y="300.5" class="st0" width="149.5" height="150.5"/> 
      <rect id="2" x="150.2" y="300.5" class="st0" width="149.5" height="150.5"/> 
      <rect id="3" y="300.5" class="st0" width="149.5" height="150.5"/> 
      <rect id="4" x="299.8" y="150.5" class="st0" width="149.5" height="150.5"/> 
      <rect id="5" x="150.2" y="150.5" class="st0" width="149.5" height="150.5"/> 
      <rect id="6" y="150.5" class="st0" width="149.5" height="150.5"/> 
      <rect id="7" x="299.8" class="st0" width="149.5" height="150.5"/> 
      <rect id="8" x="150.2" class="st0" width="149.5" height="150.5"/> 
      <rect id="9" class="st0" width="149.5" height="150.5"/> 
      <line class="path" fill="none" stroke="#000000" x1="149.5" y1="0" x2="149.5" y2="450"/> 
      <line class="path" fill="none" stroke="#000000" x1="299.5" y1="450" x2="299.5" y2="0"/> 
      <line class="path" fill="none" stroke="#000000" x1="0" y1="150.5" x2="450" y2="150.5"/> 
      <line class="path" fill="none" stroke="#000000" x1="450" y1="300.5" x2="0" y2="300.5"/> 
     </svg>

У меня есть этот svg, который является tic tac toe board. Я хочу, чтобы он загружал (запустил анимацию тегов линии) ПОСЛЕ того, как пользователь вводит количество игроков и имена игроков. Есть ли способ сделать это? прямые элементы - это то, что я буду использовать для целевых областей во время игры.Есть ли способ запустить svg на клик?

.path { 
    stroke-dasharray: 1000; 
    stroke-dashoffset: 1000; 
    animation: dash 5s linear forwards; 
} 

@keyframes dash { 
    to { 
    stroke-dashoffset: 0; 
    } 
}

источник

2015-09-26 Harry Potter

Что анимация тегов линии является то, что? Существует много разных способов анимации, и любой ответ будет зависеть от того, какой из них вы используете. –

Извините, кнопка ответа не позволяет мне форматировать. Класс path рисует линии –

прямо сейчас, когда анимация запускается при загрузке. Я хочу, чтобы он запускался после того, как я щелкнул ok в окне подсказки. Im не уверен как соединить 2 –

Как, возможно, i.e установить класс на клик?

function run() { 
 
    var lines = document.getElementsByTagName("line"); 
 
    for (var i = 0; i < lines.length; i++) { 
 
    lines[i].setAttribute("class", "path"); 
 
    } 
 
}

line { 
 
    stroke-dasharray: 1000; 
 
    stroke-dashoffset: 1000; 
 
} 
 

 
.path { 
 
    animation: dash 5s linear forwards; 
 
} 
 

 
@keyframes dash { 
 
    to { 
 
    stroke-dashoffset: 0; 
 
    } 
 
}

<button onclick="run()">click me</button> 
 
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"width="450px" height="450px" viewBox="0 0 450 450" style="enable-background:new 0 0 450 450;" xml:space="preserve"> 
 
      <style type="text/css"> 
 
       .st0{fill:#FFFFFF;} 
 
       .st1{fill:none;stroke:#000000;stroke-miterlimit:10;} 
 
      </style> 
 
      <rect id="1" x="299.8" y="300.5" class="st0" width="149.5" height="150.5"/> 
 
      <rect id="2" x="150.2" y="300.5" class="st0" width="149.5" height="150.5"/> 
 
      <rect id="3" y="300.5" class="st0" width="149.5" height="150.5"/> 
 
      <rect id="4" x="299.8" y="150.5" class="st0" width="149.5" height="150.5"/> 
 
      <rect id="5" x="150.2" y="150.5" class="st0" width="149.5" height="150.5"/> 
 
      <rect id="6" y="150.5" class="st0" width="149.5" height="150.5"/> 
 
      <rect id="7" x="299.8" class="st0" width="149.5" height="150.5"/> 
 
      <rect id="8" x="150.2" class="st0" width="149.5" height="150.5"/> 
 
      <rect id="9" class="st0" width="149.5" height="150.5"/> 
 
      <line fill="none" stroke="#000000" x1="149.5" y1="0" x2="149.5" y2="450"/> 
 
      <line fill="none" stroke="#000000" x1="299.5" y1="450" x2="299.5" y2="0"/> 
 
      <line fill="none" stroke="#000000" x1="0" y1="150.5" x2="450" y2="150.5"/> 
 
      <line fill="none" stroke="#000000" x1="450" y1="300.5" x2="0" y2="300.5"/> 
 
     </svg>

источник

2015-09-26 03:29:57

Не совсем. что svg-анимация запускается при загрузке, я хочу удерживать ее и запускать ее в определенное время с помощью «ok» из окна приглашения; то есть запросить, готов ли пользователь, когда пользователь нажимает кнопку «ok» в этом запросе, он вызывает запуск svg в этой точке. добавление класса приведет к повторному запуску svg –

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

Есть ли способ запустить svg на клик?

ответ

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