SVG动画!线水平消耗

时间:2017-03-12 10:31:27

标签: javascript animation button svg hamburger-menu

我正在尝试使用 SVG图像制作汉堡按钮。 在悬停上,我希望SVG的每个 水平扩展。 我怎样才能做到这一点?使用CSS似乎无法实现。

我一直在谷歌四处寻找没有成功找到我的问题的答案,希望你们中的一个会给我提示和帮助!

谢谢!

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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="203px" height="136px" viewBox="0 0 203 136" style="enable-background:new 0 0 203 136;" xml:space="preserve">
<line style="display:none;fill:#FFFFFF;stroke:#000000;stroke-width:4;stroke-miterlimit:10;" x1="11.748" y1="14.753" x2="110.604" y2="14.753"/>
<line style="display:none;fill:#FFFFFF;stroke:#000000;stroke-width:17;stroke-miterlimit:10;" x1="11.748" y1="68" x2="193.1" y2="68"/>
<line style="display:none;fill:#FFFFFF;stroke:#000000;stroke-width:17;stroke-miterlimit:10;" x1="11.748" y1="122.545" x2="157.102" y2="122.545"/>
<path style="fill:#FFFFFF;stroke:#333333;stroke-width:5;stroke-miterlimit:10;" d="M110.604,19.11c0,3.805-3.084,6.89-6.89,6.89
	H18.638c-3.805,0-6.89-3.084-6.89-6.89l0,0c0-3.805,3.084-6.889,6.89-6.889h85.076C107.519,12.221,110.604,15.306,110.604,19.11
	L110.604,19.11z"/>
<path style="fill:#FFFFFF;stroke:#333333;stroke-width:5;stroke-miterlimit:10;" d="M193.1,68c0,3.805-3.084,6.889-6.89,6.889
	H18.638c-3.805,0-6.89-3.084-6.89-6.889l0,0c0-3.805,3.084-6.89,6.89-6.89H186.21C190.015,61.11,193.1,64.195,193.1,68L193.1,68z"/>
<path style="fill:#FFFFFF;stroke:#333333;stroke-width:5;stroke-miterlimit:10;" d="M157.102,118.546
	c0,3.805-3.084,6.889-6.89,6.889H18.638c-3.805,0-6.89-3.084-6.89-6.889l0,0c0-3.805,3.084-6.89,6.89-6.89h131.574
	C154.017,111.656,157.102,114.741,157.102,118.546L157.102,118.546z"/>
</svg>

0 个答案:

没有答案