这个SVG代码在Firefox中有效,但我在Chrome中遇到了问题,当然还有IE中的问题。我做错了什么?

时间:2017-08-28 01:50:06

标签: javascript google-chrome internet-explorer firefox svg

这个SVG代码在Firefox中运行,但我在Chrome中遇到了问题,当然还有IE中的问题。

在Chrome中:忽略中断线。 在IE中:没有显示。

我认为问题出在格式字符'\ r \ n'的行中,但我找不到错误。

这些行从tooltip.innerHTML开始+ ='\ r \ n第二行。'

我做错了什么?或更确切地说:我对IE&铬?

提前Thamks。

<?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'>

<style>

.boton
{
    cursor:pointer;
}

.cursorHand
{

}

.tooltip 
{
    white-space: pre;       /*Resuelve el problema del ToolTip Break Line*/
    position: absolute; 
    top: 0;  
    left: 0; 
    z-index: 2; 

    font: normal 10pt sans-serif; 
    padding: 3px; 
    border: solid 1px;
}

.tooltip_bg
{
    fill: #F2F5A9;
    stroke: black;
    stroke-width: 1;
    opacity: 1;
}

</style>
/****************************
 Sólo se invoca en el inicio.
/****************************/
function init(evt) {

    gSvgDoc = evt.target.ownerDocument;

    //El botón toggleButtonLCOND;
    toggleButtonLCOND = document.getElementById('toggleInsertaElementoLCOND');
    toggleButtonLCOND.addEventListener('mouseover', manejadorDeMouseHoverEnBotones);    

    //Seteo ToolTips
    tooltip = gRootDocumento.getElementById('tooltip');
    tooltip_bg = gRootDocumento.getElementById('tooltip_bg');
}

 <![CDATA[ 

    var toggleButtonLCOND; 
    var gRootDocumento = document.documentElement;
    var tooltip = gRootDocumento.getElementById('tooltip');
    var tooltip_bg = gRootDocumento.getElementById('tooltip_bg');
    var timeEntradaEnBoton; 


/*************************************
 Manejador de evento Hover en botones.
**************************************/
    function manejadorDeMouseHoverEnBotones(evt) {

        //Arranco contador de ToolTip. Se para a los 3s y arranca ToolTip
        var cuentaAtras = 1;

        actualizaToolTip(evt,this);

        tooltip.setAttribute('visibility','hidden');    
        tooltip_bg.setAttribute('visibility','hidden');

        timeEntradaEnBoton = setInterval(function(){ 
            cuentaAtras = cuentaAtras-1;
            if(cuentaAtras == 0) {

                tooltip.setAttribute('visibility','visible');   
                tooltip_bg.setAttribute('visibility','visible');                
                clearInterval(timeEntradaEnBoton);
            }

        }, 1500);

    }



/***********************************
 Actualiza el contenido del ToolTip.
************************************/
    function actualizaToolTip(evt,elemento) {
        //Ayuda genérica
        tooltip.innerHTML = "First Line";
        //Dependiendo del botón, un tooltip u otro
        tooltip.innerHTML +='\r\nSecond Line.'
        tooltip.innerHTML +='\r\nThird Line'
        tooltip.innerHTML +='\r\nFourth Line.'

        //Setea dimensiones del ToolTip
        tooltip.setAttribute('x',evt.clientX+11);
        tooltip.setAttribute('y',evt.clientY+27);
        var bBoxToolTip=tooltip.getBBox();
        var anchoToolTip = bBoxToolTip.width;
        var altoToolTip = bBoxToolTip.height;
        tooltip_bg.setAttribute('width',anchoToolTip+8);
        tooltip_bg.setAttribute('height',altoToolTip+4);
        tooltip_bg.setAttribute('x',evt.clientX+8);
        tooltip_bg.setAttribute('y',evt.clientY+14);
    }

]]>
</script>

    <g>

        <g id="toggleInsertaElementoLCOND" class="boton" toggleButton="true" triStateButton="false">
            <path id="bordeLCON" fill="white" stroke="#000000" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
                M186.875,264.875h46c1.104,0,2,0.895,2,2v21c0,1.104-0.896,2-2,2h-46c-1.104,0-2-0.896-2-2v-21
                C184.875,265.77,185.771,264.875,186.875,264.875z"/>
            <g id="dibujoLCON">     
                <path shape-rendering="geometricPrecision" fill="none" stroke="#804040" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="3" d="
                M222.918,276.068V268l-6.154,4.009 M223.018,278.74l-0.1,8.011l-6.105-3.938 M214.596,273.402l-6.354,4.002l6.354,4.063"/>
                <line shape-rendering="geometricPrecision" fill="none" stroke="#2F5F9E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="3" x1="194.25" y1="277.395" x2="208.268" y2="277.395"/>        
                <path shape-rendering="geometricPrecision" fill="none" stroke="#2F5F9E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="3" d="
                M215.512,269.639l2.442,4.68 M220.568,276.068h4.932 M225.5,278.77h-4.932 M213.412,283.823l2.484-4.682 M217.997,280.42
                l-2.485,4.684 M215.898,275.695l-2.486-4.686"/>
            </g>
        </g>

        <rect class="tooltip_bg" id="tooltip_bg" x="0" y="0" rx="4" ry="4" width="55" height="17" visibility="hidden"/>
        <text class="tooltip" id="tooltip" x="0" y="0"></text>
    </g>

</svg>

0 个答案:

没有答案