Форум

AndreySt · #1 (**permalink**) 16.05.2016, 17:14

Суть вопроса в чем, есть SVG в котором 300+ элементов <path>
необходим цикл который задал бы всем данным элементам id.
Возможно задача легкая, но мне, как человеку который только начал изучать js, не под силу

можно задать вручную, но как-то стыдно делать подобное)

рони · #2 (**permalink**) 16.05.2016, 17:18

AndreySt,
а зачем?

AndreySt · #3 (**permalink**) 16.05.2016, 17:20

пытаюсь сделать так, что бы по скролу прорисовывался svg
обратиться к ним по названию тега <path> у меня не вышло

рони · #4 (**permalink**) 16.05.2016, 17:21

AndreySt,
что мешает использовать индекс элемента?

рони · #5 (**permalink**) 16.05.2016, 17:29

AndreySt,
может ещё svg на странице нет?

рони · #6 (**permalink**) 16.05.2016, 17:33

AndreySt,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">

  <script>

 window.addEventListener('DOMContentLoaded', function() {
   var path = [].slice.call(document.querySelectorAll("path"));
   alert(path.length)
     });
  </script>
</head>

<body>
    <svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">

  <path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>
  <path d="M70 10 C 70 20, 120 20, 120 10" stroke="black" fill="transparent"/>
  <path d="M130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/>
  <path d="M10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/>
  <path d="M70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/>
  <path d="M130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/>
  <path d="M10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/>
  <path d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/>
  <path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/>

</svg>

</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript