Question

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

该按钮可以毫无问题地监听mouseout和mouseover事件，更改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秒，因此动画的开始时间已经过去，动画不会再次触发。

我们可以

通过调用beginElement（）手动触发javascript动画，这只会影响一个动画
强制文档时间轴回到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>

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

1 个答案: