2
CSSを使用せずにmouseoverイベントでアニメーショングラデーションを使用してsvgボタンを作成しています。CSSを使用しないSVGボタンが正しく動作しない
ボタンは、問題なしで、リスナの回答に応じてid = "rellenoZoomHover"とid = "rellenoZoom"の間のradialGradient属性を変更して、mouseoutイベントとmouseoverイベントをリッスンします。
ボタンには、radialGradient宣言タグのタグが1回だけ繰り返されています。
問題は、スクリプトが初めて実行されることです。2回目は、アニメーションを無視します。
Whath私は間違っていますか？事前に感謝
<?xml version='1.0' encoding='UTF-8'?>
<svg version='1.1' id='project' xmlns:svg='http://www.w3.org/2000/svg'
\t \t \t \t \t \t \t \t xmlns='http://www.w3.org/2000/svg'
\t \t \t \t \t \t \t \t xmlns:xlink='http://www.w3.org/1999/xlink'
onload='init(evt)'>
<script type='text/ecmascript'>
\t
\t function init(evt) {
\t \t cmdButtonZoomPrevio = document.getElementById('cmdZoomPrevio');
\t \t cmdButtonZoomPrevio.addEventListener('mouseover', manejadorDeMouseHoverEnBotones);
\t \t cmdButtonZoomPrevio.addEventListener('mouseout', manejadorDeMouseOutEnBotones); \t
\t }
<![CDATA[
\t function manejadorDeMouseHoverEnBotones(evt) {
\t \t var pathVolatil = cmdButtonZoomPrevio.childNodes[1];
\t \t pathVolatil.setAttribute('fill','url(#rellenoZoomHover)');
\t }
\t
\t function manejadorDeMouseOutEnBotones(evt) { \t \t
\t \t var pathVolatil = cmdButtonZoomPrevio.childNodes[1];
\t \t pathVolatil.setAttribute('fill','url(#rellenoZoom)');
\t }
\t //El botón cmdZoomPrevio;
\t var cmdButtonZoomPrevio;
]]>
</script>
<g id="cmdZoomPrevio" class="boton" toggleButton="false" triStateButton="false"> \t
\t \t \t <path id="bordeZoomSE" fill="url(#rellenoZoom)" stroke="#000000" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
\t \t \t \t 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
\t \t \t \t 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"/>
\t \t \t <g id="dibujocmdZoomSE">
\t \t \t \t <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"/>
\t \t \t \t <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
\t \t \t \t 101.313,89.118 104.165,87.553 \t \t \t "/>
\t \t \t \t <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"/>
\t \t \t \t <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 \t \t \t "/>
\t \t \t \t <path fill="none" stroke="#006633" stroke-width="2.15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="3" d="
\t \t \t \t 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
\t \t \t \t 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"/>
\t \t \t \t <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
\t \t \t \t 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
\t \t \t \t 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"/>
\t \t \t \t <path fill="none" stroke="#0000FF" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="3" d="
\t \t \t \t 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
\t \t \t \t 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
\t \t \t \t c0,2.048-0.758,3.807-2.285,5.271C101.622,86.217,99.841,86.978,97.752,86.978z"/>
\t \t \t </g>
\t \t
\t \t \t <defs>
\t \t \t \t <radialGradient id="rellenoZoomHover" cx="65" cy="65" r="65" gradientUnits="userSpaceOnUse">
\t \t \t \t \t <stop offset="0.5" style="stop-color:#FFFFFF">
\t \t \t \t \t \t <animate attributeName="stop-color" values="#FFFFFF;#81BEF7" dur="2s" repeatCount="1"/> \t
\t \t \t \t \t \t </stop>
\t \t \t \t \t <stop offset="1" style="stop-color:#81BEF7"/>
\t \t \t \t </radialGradient>
\t \t \t \t \t
\t \t \t \t <radialGradient id="rellenoZoom" cx="65" cy="65" r="65" gradientUnits="userSpaceOnUse">
\t \t \t \t \t <stop offset="0.5" style="stop-color:#FFFFFF" />
\t \t \t \t \t <stop offset="1" style="stop-color:#A4A4A4"/>
\t \t \t \t </radialGradient>
\t \t \t </defs>
</g>
</svg>