hacer clic objeto de imagen SVG con onclick, evitando el posicionamiento absoluto

Question

he tratado de cambiar las imágenes en mi sitio de img a svg, cambiando img etiquetas para embed y object etiquetas. Sin embargo, la implementación de la función onclick, que anteriormente estaba incluida en la etiqueta img, está resultando ser la más difícil.

Encontré onclick no tuvo ningún efecto cuando se coloca dentro de la etiqueta object o embed.

Por lo tanto, hice un div exclusivamente para el svg, y coloqué onclick en esta etiqueta div. Pero, no tiene efecto a menos que el visitante haga clic en los bordes/relleno de la imagen.

He leído acerca de la superposición de un div, pero estoy tratando de evitar el uso del posicionamiento absolute, o la especificación de position en absoluto.

¿Hay alguna otra forma de aplicar onclick a un svg?

¿Alguien ha encontrado este problema? Preguntas y sugerencias son bienvenidas.

Answer 1

¿Has mirado en el uso de la propiedad CSS z-index para que sea el dev contenedor "en la parte superior" del SVG? Debido a que el div es (presumiblemente) transparente, igual verá la imagen exactamente como antes.

Creo que esta es la mejor manera de solucionar el problema, sin necesidad de hackear. z-index solo es útil para elementos que tienen una propiedad position de fixed, relative o, como ya lo ha escuchado, absolute. Sin embargo, en realidad no tienes que mover el objeto.

Por ejemplo:

<style> 
    .svgwrapper { 
     position: relative; 
     z-index: 1; 
    } 
</style> 
<div class="svgwrapper" onClick="function();"> 
    <object src="blah" /> 
</div> 

Por lo que vale la pena, sino que también sería un poco más elegante y segura de utilizar onclick no en todos, pero en lugar de unirse al evento click usando javascript. Sin embargo, ese es otro problema en total.

Answer 2

Suponiendo que no es necesario el apoyo del navegador cruz (lo cual es imposible sin un plugin para IE), ha intentado utilizar svg as a background image?

Experimental, seguro, pero pensé que lo mencionaría.

Answer 3

Lo conseguí trabajando con las últimas versiones de Firefox, Chrome, Safari y Opera.

Se basa en un div transparente antes del objeto que tiene una posición absoluta y establece el ancho y la altura para que cubra la etiqueta del objeto a continuación.

aquí está, yo he sido un poco orzuelos en línea perezosos y usados:

<div id="toolbar" style="width: 600px; height: 100px; position: absolute; z-index: 1;"></div> 
<object data="interface.svg" width="600" height="100" type="image/svg+xml"> 
</object> 

He utilizado el siguiente JavaScript para conectar un evento para que:

<script type="text/javascript"> 
    var toolbar = document.getElementById("toolbar"); 
    toolbar.onclick = function (e) { 
     alert("Hello"); 
    }; 
</script> 

Answer 4

Usted puede tener un evento onclick en svg en sí mismo, hago esto todo el tiempo en mi trabajo.hacer una rect sobre el espacio de su SVG, (así lo definen último, recuerde SVG utiliza el modelo de pintores)

rect.btn { 
    stroke:#fff; 
    fill:#fff; 
    fill-opacity:0; 
    stroke-opacity:0; 
} 

entonces como un atributo a la rect añadir el onclick (esto se puede hacer con js o jQuery como bien).

<div> 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <g> 
    <circle ... //your img svg 
    <rect class="btn" x="0" y="0" width="10" height="10" onclick="alert('click!')" /> 
    </g> 
</svg> 
</div> 

esto funcionará en la mayoría de los navegadores modernos, http://caniuse.com/svg ... aunque si necesita compatibilidad cruzada, se puede implementar Google Chrome Frame. http://www.google.com/chromeframe

Answer 5

Usted podría utilizar siguiente código:

<style> 
    .svgwrapper { 
     position: relative; 
    } 
    .svgwrapper { 
     position: absolute; 
     z-index: -1; 
    } 
</style> 

<div class="svgwrapper" onClick="function();"> 
    <object src="blah" /> 
</div> 

b3ng0 escribió un código similar pero no funciona. El índice z del padre debe ser automático.

Answer 6

Esto comenzó como un comentario sobre la solución de RGB pero no pude adaptarlo, por lo que lo he convertido en una respuesta. La inspiración de la cual es completamente RGB.

La solución RGB funcionó para mí. Sin embargo, quería señalar un par de puntos que pueden ayudar a otros que llegan a este post (como yo) que no son tan familiares que svg y que bien pueden haber generado su archivo svg a partir de un paquete de gráficos (como yo lo hice).

Así que para aplicar soluciones de RGB utilicé:

El css

<style> 
    rect.btn { 
     stroke:#fff; 
     fill:#fff; 
     fill-opacity:0; 
     stroke-opacity:0; 
    } 
</style> 

El script jQuery

<script type="text/javascript" src="../_public/_jquery/jquery-1.7.1.js"></script> 
<script type="text/javascript"> 
    $("document").ready(function(){ 
     $(".btn").bind("click", function(event){alert("clicked svg")}); 
    }); 
</script> 

el código HTML para codificar la inclusión de su archivo SVG preexistente en el etiqueta de grupo dentro del código svg.

<div> 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <g> 
    <image x="0" y="0" width="10" height="10" 
    xlink:href="../_public/_icons/booked.svg" width="10px"/> 
    <rect class="btn" x="0" y="0" width="10" height="10"/> 

    </g> 
</svg> 
</div> 

Sin embargo, en mi caso tengo varios iconos SVG que deseo se pueda hacer clic y incorprating cada uno de estos en la etiqueta SVG estaba empezando a ser engorroso.

Así que como un enfoque alternativo donde podría emplear Clases, utilicé jquery.svg. Esta es probablemente una aplicación vergonzosa de este complemento que puede hacer todo tipo de cosas con SVG. Pero funcionó usando el siguiente código:

<script type="text/javascript" src="../_public/_jquery/jquery-1.7.1.js"></script>  
<script type="text/javascript" src="jquery.svg.min.js"></script> 
<script type="text/javascript"> 
    $("document").ready(function(){ 
     $(".svgload").bind("click", function(event){alert("clicked svg")}); 

     for (var i=0; i < 99; i++) { 
      $(".svgload:eq(" + i + ")").svg({ 
       onLoad: function(){ 
       var svg = $(".svgload:eq(" + i + ")").svg('get'); 
       svg.load("../_public/_icons/booked.svg", {addTo: true, changeSize: false});   
       }, 
       settings: {}} 
     ); 
     } 
    }); 
</script> 

donde html

<div class="svgload" style="width: 10px; height: 10px;"></div> 

La ventaja de mi pensamiento es que puedo usar la clase apropiada donde cada vez se necesitan los iconos y evitar un buen montón de código en el cuerpo del html que ayuda a la legibilidad. Y solo necesito incorporar el archivo svg preexistente una vez.

Editar: Aquí hay una versión más nítida del guión, cortesía de Keith Wood: utilizando .svg carga la configuración URL.

<script type="text/javascript" src="../_public/_jquery/jquery-1.7.1.js"></script>  
<script type="text/javascript" src="jquery.svg.min.js"></script> 
<script type="text/javascript"> 
    $("document").ready(function(){ 

     $('.svgload').on('click', function() { 
      alert('clicked svg new'); 
     }).svg({loadURL: '../_public/_icons/booked.svg'}); 

    }); 
</script> 

Answer 7

Se trabajó mediante la simple sustitución de la etiqueta <embed/> con <img/> y eliminar el atributo type.

Por ejemplo, en mi código, en lugar de:

<embed src=\"./images/info_09c.svg\" type=\"image/svg+xml\" width=\"45\" onClick='afiseaza_indicatie($i, \"$indicatii[$i]\")'> 

que no responde a los chasquidos, escribí:

<img src=\"./images/info_09c.svg\" height=\"25\" width=\"25\" onClick='afiseaza_indicatie($i, \"$indicatii[$i]\")'> 

Funciona en Internet Explorer y Google Chrome, y espero eso en los otros navegadores también.