4

Мне нужно сделать последовательный запуск "rect" svg при нажатии на определенную кнопку. При этом<rect> должны последовательно становиться видимыми.

<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 1920 1080" style="enable-background:new 0 0 1920 1080;" xml:space="preserve">
<style type="text/css">
	.st0{clip-rule:evenodd;stroke:#000000;stroke-miterlimit:10;}
	.st1{font-family:'MyriadPro-Regular';}
	.st2{font-size:13px;}
</style>
<rect x="899.5" y="523.5" class="st0" width="35" height="35"/>
<rect x="940.5" y="526.5" class="st0" width="35" height="35"/>
<rect x="905.5" y="526.5" class="st0" width="35" height="35"/>
<rect x="969.5" y="526.5" class="st0" width="35" height="35"/>
<rect x="934.5" y="491.5" class="st0" width="35" height="35"/>
<rect x="934.5" y="561.5" class="st0" width="35" height="35"/>
<rect x="905.5" y="491.5" class="st0" width="35" height="35"/>
<rect x="969.5" y="491.5" class="st0" width="35" height="35"/>
<rect x="905.5" y="561.5" class="st0" width="35" height="35"/>
<rect x="969.5" y="561.5" class="st0" width="35" height="35"/>
<rect x="870.5" y="456.5" class="st0" width="35" height="35"/>
<rect x="905.5" y="806.5" class="st0" width="35" height="35"/>
<rect x="1004.5" y="456.5" class="st0" width="35" height="35"/>
<rect x="1004.5" y="596.5" class="st0" width="35" height="35"/>
<rect x="937.5" y="456.5" class="st0" width="35" height="35"/>
<rect x="1004.5" y="526.5" class="st0" width="35" height="35"/>
<rect x="937.5" y="596.5" class="st0" width="35" height="35"/>
<rect x="870.5" y="526.5" class="st0" width="35" height="35"/>
<rect x="969.5" y="456.5" class="st0" width="35" height="35"/>
</svg>

3
  • 1
    Не могли бы вы конкретнее расписать что вам нужно получить в итоге? Лично я не совсем понял, что вы хочете
    – Arthur
    10 мая 2018 в 18:54
  • Я хочу чтоб при нажатии на кнопку, начиная от первого и до последнего они становились видимые, только последовательно, начиная с первого. То есть сначало 1 "display: block", потом 2 "display: block", и так далие.
    – Ncorvenius
    10 мая 2018 в 19:03
  • Автор вопроса, не забудьте поставить галочку, если вам помог ответ
    – Arthur
    28 мая 2018 в 9:51

1 ответ 1

4

Вам нужен именно такой эффект?

var btn = document.getElementById('btn');
var rects = document.getElementsByClassName('st0');
btn.onclick = function() {
  Array.from(rects).forEach(function(el) {
    el.classList.add('visible');
  });
}
.st1 {
  font-family: 'MyriadPro-Regular';
}

.st2 {
  font-size: 13px;
}

.st0 {
  transition: 0.5s;
  opacity: 0;
  clip-rule: evenodd;
  stroke: #000000;
  stroke-miterlimit: 10;
  width: 35px;
  height: 35px;
}

.st0:nth-child(0) {
  transition-delay: 500ms;
}

.st0:nth-child(1) {
  transition-delay: 540ms;
}

.st0:nth-child(2) {
  transition-delay: 580ms;
}

.st0:nth-child(3) {
  transition-delay: 620ms;
}

.st0:nth-child(4) {
  transition-delay: 660ms;
}

.st0:nth-child(5) {
  transition-delay: 700ms;
}

.st0:nth-child(6) {
  transition-delay: 740ms;
}

.st0:nth-child(7) {
  transition-delay: 780ms;
}

.st0:nth-child(8) {
  transition-delay: 820ms;
}

.st0:nth-child(9) {
  transition-delay: 860ms;
}

.st0:nth-child(10) {
  transition-delay: 900ms;
}

.st0:nth-child(11) {
  transition-delay: 940ms;
}

.st0:nth-child(12) {
  transition-delay: 980ms;
}

.st0:nth-child(13) {
  transition-delay: 1020ms;
}

.st0:nth-child(14) {
  transition-delay: 1060ms;
}

.st0:nth-child(15) {
  transition-delay: 1100ms;
}

.st0:nth-child(16) {
  transition-delay: 1140ms;
}

.st0:nth-child(17) {
  transition-delay: 1180ms;
}

.st0:nth-child(18) {
  transition-delay: 1220ms;
}

.st0:nth-child(19) {
  transition-delay: 1260ms;
}

.visible {
  opacity: 1;
}
<button id="btn">Click</button>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 1080">
  <rect x="899.5" y="523.5" class="st0"/>
  <rect x="940.5" y="526.5" class="st0"/>
  <rect x="905.5" y="526.5" class="st0"/>
  <rect x="969.5" y="526.5" class="st0"/>
  <rect x="934.5" y="491.5" class="st0"/>
  <rect x="934.5" y="561.5" class="st0"/>
  <rect x="905.5" y="491.5" class="st0"/>
  <rect x="969.5" y="491.5" class="st0"/>
  <rect x="905.5" y="561.5" class="st0"/>
  <rect x="969.5" y="561.5" class="st0"/>
  <rect x="870.5" y="456.5" class="st0"/>
  <rect x="905.5" y="806.5" class="st0"/>
  <rect x="1004.5" y="456.5" class="st0"/>
  <rect x="1004.5" y="596.5" class="st0"/>
  <rect x="937.5" y="456.5" class="st0"/>
  <rect x="1004.5" y="526.5" class="st0"/>
  <rect x="937.5" y="596.5" class="st0"/>
  <rect x="870.5" y="526.5" class="st0"/>
  <rect x="969.5" y="456.5" class="st0"/>
</svg>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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