如何在svg中声明变量

时间:2016-02-29 12:15:06

标签: xml svg

我正在尝试学习SVG 这是我收到我的信息的网址:

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

正如您在&#34;结构和布局&#34;有一些变数。我把它放在哪里?我是否使用<script>标签,或者是否有另外一种方法可以在svg中执行此操作?

这是我现在的代码:

&#13;
&#13;
<?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">
	<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"
	 viewBox="0 0 200 150" style="enable-background:new 0 0 200 150;" xml:space="preserve">

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

		<script  type="text/javascript">var</script>
		
		<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"/>

		<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". -->
			<ellipse id="circelL" class="st1" cx="34.4" cy="109.5" rx="14.4" ry="3"/>
			<ellipse id="circelR" class="st1" cx="165.3" cy="109.5" rx="14.4" ry="3"/>
		</g>

	</svg>
</div>
&#13;
&#13;
&#13;

谢谢!

1 个答案:

答案 0 :(得分:0)

我得到了解决方案!
您从svg复制代码并将其粘贴到您的html页面。当你这样做时,你可以制作<script>标签并开始调整svg。

谢谢你们的帮助!