没有 CSS 的 SVG 按钮无法正常工作

Question

我正在制作一个在鼠标悬停事件中带有动画渐变的 svg 按钮，没有 CSS。

该按钮侦听鼠标退出和鼠标悬停事件，没有任何问题，根据侦听器的答案，在id="rellenoZoomHover"和id="rellenoZoom"之间更改radialGradient属性。

按钮中有一个 radialGradient 声明标签，该标签仅重复一次。

问题是脚本只执行第一次：第二次，忽略动画。

我做错了什么？.提前致谢

<?xml version='1.0' encoding='UTF-8'?>
<svg version='1.1' id='project' xmlns:svg='http://www.w3.org/2000/svg'
								xmlns='http://www.w3.org/2000/svg'
								xmlns:xlink='http://www.w3.org/1999/xlink'
onload='init(evt)'>
<script type='text/ecmascript'>
	
	function init(evt) {
		cmdButtonZoomPrevio = document.getElementById('cmdZoomPrevio');
		cmdButtonZoomPrevio.addEventListener('mouseover', manejadorDeMouseHoverEnBotones);
		cmdButtonZoomPrevio.addEventListener('mouseout', manejadorDeMouseOutEnBotones);	
	}
<![CDATA[

	function manejadorDeMouseHoverEnBotones(evt) {
		var pathVolatil = cmdButtonZoomPrevio.childNodes[1];
		pathVolatil.setAttribute('fill','url(#rellenoZoomHover)');
	}
	
	function manejadorDeMouseOutEnBotones(evt) {		
		var pathVolatil = cmdButtonZoomPrevio.childNodes[1];
		pathVolatil.setAttribute('fill','url(#rellenoZoom)');
	}
	//El botón cmdZoomPrevio;
	var cmdButtonZoomPrevio;
]]>
</script>

<g id="cmdZoomPrevio" class="boton" toggleButton="false" triStateButton="false">	
			<path id="bordeZoomSE" fill="url(#rellenoZoom)" stroke="#000000" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
				M64.925,85.116c3.529,0,7.005-0.938,10.042-2.69c9.609-5.554,12.924-17.858,7.354-27.479l34.848-20.112
				c16.633,28.863,6.753,65.771-22.063,82.438c-9.188,5.294-19.581,8.093-30.167,8.093L64.925,85.116L64.925,85.116z"/>
			<g id="dibujocmdZoomSE">
				<rect x="105.766" y="97.561" transform="matrix(0.8707 -0.4918 0.4918 0.8707 -34.1811 65.8925)" fill="#333333" width="4.92" height="0.784"/>
				<polygon fill="#663300" points="104.234,87.553 109.439,96.827 109.439,96.897 106.586,98.467 106.518,98.467 101.313,89.191 
				101.313,89.118 104.165,87.553 			"/>
				<rect x="101.312" y="86.085" transform="matrix(0.8715 -0.4904 0.4904 0.8715 -29.6865 61.2979)" width="1.641" height="2.429"/>
				<polygon fill="#006633" points="98.104,99.394 88.091,93.723 88.091,93.651 98.068,87.73 98.139,87.765 98.139,99.358 			"/>
				<path fill="none" stroke="#006633" stroke-width="2.15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="3" d="
				M98.104,93.543h0.854c3.382,0,6.298-0.593,8.771-1.783c2.373-1.182,3.586-2.61,3.643-4.281c-0.057-1.665-1.262-3.063-3.643-4.203
				c-2.474-1.23-5.391-1.854-8.771-1.854c-3.467,0-6.413,0.616-8.835,1.854c-0.139,0.047-0.288,0.117-0.432,0.213"/>
				<path fill="#CCFFFF" d="M97.752,86.978c-2.122-0.014-3.947-0.788-5.49-2.313c-1.463-1.474-2.184-3.263-2.174-5.354
				c-0.01-2.103,0.714-3.925,2.174-5.457c1.531-1.458,3.348-2.183,5.454-2.179c2.113-0.006,3.911,0.717,5.38,2.179
				c1.535,1.527,2.313,3.354,2.314,5.457c-0.006,2.105-0.779,3.892-2.314,5.354C101.635,86.195,99.85,86.966,97.752,86.978z"/>
				<path fill="none" stroke="#0000FF" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="3" d="
				M97.752,86.978c-2.096,0-3.9-0.761-5.42-2.288c-1.475-1.474-2.219-3.229-2.219-5.271c0-2.09,0.744-3.9,2.219-5.421
				c1.52-1.479,3.324-2.226,5.42-2.226c2.089,0,3.873,0.738,5.344,2.226c1.522,1.475,2.285,3.271,2.285,5.421
				c0,2.048-0.758,3.807-2.285,5.271C101.622,86.217,99.841,86.978,97.752,86.978z"/>
			</g>
		
			<defs>
				<radialGradient id="rellenoZoomHover" cx="65" cy="65" r="65"  gradientUnits="userSpaceOnUse">
					<stop offset="0.5" style="stop-color:#FFFFFF">
						<animate attributeName="stop-color" values="#FFFFFF;#81BEF7" dur="2s" repeatCount="1"/>	
						</stop>
					<stop offset="1" style="stop-color:#81BEF7"/>
				</radialGradient>
					
				<radialGradient id="rellenoZoom" cx="65" cy="65" r="65" gradientUnits="userSpaceOnUse">
					<stop offset="0.5" style="stop-color:#FFFFFF" />
					<stop offset="1" style="stop-color:#A4A4A4"/>
				</radialGradient>
			</defs>
</g>
</svg>

Answer 1

文档的时间线从 0 开始并保持为 0，除非运行某些动画。随着动画的运行，时间线会前进，在这种情况下为 2 秒，因为我们有 2 秒的动画。

下次我们将鼠标悬停在动画时间轴上时是 2 秒，因此动画的开始时间已过后不会再次触发。

我们可以

1. 通过调用beginElement((手动触发javascript动画，这将只影响一个动画

2. 强制文档时间轴恢复为 0 这将影响所有动画。

下面的代码演示了两者(2.被注释掉，因为我们只需要一种技术(

<?xml version='1.0' encoding='UTF-8'?>
<svg version='1.1' id='project' xmlns:svg='http://www.w3.org/2000/svg'
								xmlns='http://www.w3.org/2000/svg'
								xmlns:xlink='http://www.w3.org/1999/xlink'
onload='init(evt)'>
<script type='text/ecmascript'>
	
	function init(evt) {
		cmdButtonZoomPrevio = document.getElementById('cmdZoomPrevio');
		cmdButtonZoomPrevio.addEventListener('mouseover', manejadorDeMouseHoverEnBotones);
		cmdButtonZoomPrevio.addEventListener('mouseout', manejadorDeMouseOutEnBotones);	
	}
<![CDATA[

	function manejadorDeMouseHoverEnBotones(evt) {
		var pathVolatil = cmdButtonZoomPrevio.childNodes[1];
		pathVolatil.setAttribute('fill','url(#rellenoZoomHover)');
document.getElementById('rellenoZoomHoverAnimate').beginElement();
//document.getElementById('project').setCurrentTime(0);
	}
	
	function manejadorDeMouseOutEnBotones(evt) {		
		var pathVolatil = cmdButtonZoomPrevio.childNodes[1];
		pathVolatil.setAttribute('fill','url(#rellenoZoom)');
	}
	//El botón cmdZoomPrevio;
	var cmdButtonZoomPrevio;
]]>
</script>

<g id="cmdZoomPrevio" class="boton" toggleButton="false" triStateButton="false">	
			<path id="bordeZoomSE" fill="url(#rellenoZoom)" stroke="#000000" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
				M64.925,85.116c3.529,0,7.005-0.938,10.042-2.69c9.609-5.554,12.924-17.858,7.354-27.479l34.848-20.112
				c16.633,28.863,6.753,65.771-22.063,82.438c-9.188,5.294-19.581,8.093-30.167,8.093L64.925,85.116L64.925,85.116z"/>
			<g id="dibujocmdZoomSE">
				<rect x="105.766" y="97.561" transform="matrix(0.8707 -0.4918 0.4918 0.8707 -34.1811 65.8925)" fill="#333333" width="4.92" height="0.784"/>
				<polygon fill="#663300" points="104.234,87.553 109.439,96.827 109.439,96.897 106.586,98.467 106.518,98.467 101.313,89.191 
				101.313,89.118 104.165,87.553 			"/>
				<rect x="101.312" y="86.085" transform="matrix(0.8715 -0.4904 0.4904 0.8715 -29.6865 61.2979)" width="1.641" height="2.429"/>
				<polygon fill="#006633" points="98.104,99.394 88.091,93.723 88.091,93.651 98.068,87.73 98.139,87.765 98.139,99.358 			"/>
				<path fill="none" stroke="#006633" stroke-width="2.15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="3" d="
				M98.104,93.543h0.854c3.382,0,6.298-0.593,8.771-1.783c2.373-1.182,3.586-2.61,3.643-4.281c-0.057-1.665-1.262-3.063-3.643-4.203
				c-2.474-1.23-5.391-1.854-8.771-1.854c-3.467,0-6.413,0.616-8.835,1.854c-0.139,0.047-0.288,0.117-0.432,0.213"/>
				<path fill="#CCFFFF" d="M97.752,86.978c-2.122-0.014-3.947-0.788-5.49-2.313c-1.463-1.474-2.184-3.263-2.174-5.354
				c-0.01-2.103,0.714-3.925,2.174-5.457c1.531-1.458,3.348-2.183,5.454-2.179c2.113-0.006,3.911,0.717,5.38,2.179
				c1.535,1.527,2.313,3.354,2.314,5.457c-0.006,2.105-0.779,3.892-2.314,5.354C101.635,86.195,99.85,86.966,97.752,86.978z"/>
				<path fill="none" stroke="#0000FF" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="3" d="
				M97.752,86.978c-2.096,0-3.9-0.761-5.42-2.288c-1.475-1.474-2.219-3.229-2.219-5.271c0-2.09,0.744-3.9,2.219-5.421
				c1.52-1.479,3.324-2.226,5.42-2.226c2.089,0,3.873,0.738,5.344,2.226c1.522,1.475,2.285,3.271,2.285,5.421
				c0,2.048-0.758,3.807-2.285,5.271C101.622,86.217,99.841,86.978,97.752,86.978z"/>
			</g>
		
			<defs>
				<radialGradient id="rellenoZoomHover" cx="65" cy="65" r="65"  gradientUnits="userSpaceOnUse">
					<stop offset="0.5" style="stop-color:#FFFFFF">
						<animate id="rellenoZoomHoverAnimate" attributeName="stop-color" values="#FFFFFF;#81BEF7" dur="2s" repeatCount="1"/>	
						</stop>
					<stop offset="1" style="stop-color:#81BEF7"/>
				</radialGradient>
					
				<radialGradient id="rellenoZoom" cx="65" cy="65" r="65" gradientUnits="userSpaceOnUse">
					<stop offset="0.5" style="stop-color:#FFFFFF" />
					<stop offset="1" style="stop-color:#A4A4A4"/>
				</radialGradient>
			</defs>
</g>
</svg>