Как объявить переменные в svg

Question

Я пытаюсь изучить SVG на данный момент.
Это URL, откуда я получаю мою информацию:

http://tympanus.net/codrops/2015/03/25/jump-loader-animation-svg-gsap/

Как вы можете видеть на «Структура и Layout» есть некоторые переменные. Где я их помещаю? Я использую тег <script> или есть ли другой способ сделать это в svg?

это мой код прямо сейчас:

<?xml version="1.0" encoding="utf-8"?> 
 
<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
 

 
<div id="container"> 
 
\t <svg version="1.1" id="loader" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
\t viewBox="0 0 200 150" style="enable-background:new 0 0 200 150;" xml:space="preserve"> 
 

 
\t \t <style type="text/css"> 
 
\t \t \t .st0{fill:none;stroke:#000000;stroke-width:10;stroke-linecap:round;stroke-miterlimit:10;} 
 
\t \t \t .st1{fill:none;stroke:#000000;stroke-linecap:round;stroke-miterlimit:10;} 
 
\t \t </style> 
 

 
\t \t <script type="text/javascript">var</script> 
 
\t \t 
 
\t \t <path id="jump" class="st0" d="M34.7,107.8c0-36,29.7-65.6,65.5-65.5c35.6,0.1,65,29.4,65.1,65.1"/> 
 

 
\t \t <g stroke="#2d2d2d" stroke-width="1"> <!-- [** ! **] de <g> tag groepeert alles wat er in staat. de attributen welke je hier in zet (vb een stroke) geven dit door aan alle "child elements". --> 
 
\t \t \t <ellipse id="circelL" class="st1" cx="34.4" cy="109.5" rx="14.4" ry="3"/> 
 
\t \t \t <ellipse id="circelR" class="st1" cx="165.3" cy="109.5" rx="14.4" ry="3"/> 
 
\t \t </g> 
 

 
\t </svg> 
 
</div>

Спасибо !!

Answer 1

http://tympanus.net/Tutorials/SVGLoaderGSAP/

После загрузки правой кнопкой мыши и выберите инспектировать элемент, который вы можете просмотреть использование.

Answer 2

У меня есть решение!
Вы копируете код из svg и вставляете его на страницу html. когда вы это сделаете, вы можете сделать тег <script> и начать настройку svg.

Спасибо, ребята, за вашу помощь!