html - para - Haciendo clic en un objeto de imagen svg con onclick, evitando el posicionamiento absoluto

insertar svg con css

Question

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

Descubrí que el onclick no tuvo ningún efecto cuando se coloca dentro del object o la etiqueta de embed .

Por lo tanto, hice una div exclusivamente para svg, y 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 sobre la superposición de un div , pero trato de evitar usar absolute posicionamiento absolute o especificar la position .

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

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

Answer 1

¿Has buscado utilizar la propiedad CSS z-index para hacer que el contenedor dev esté "en la parte superior" de svg? Debido a que el div es (presumiblemente) transparente, igual verá la imagen exactamente como antes.

Esto, creo, es la mejor forma de resolver el problema, sin la intención de hackear. z-index solo es útil para elementos que tienen una propiedad de position fixed , relative o, como habrás 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, también sería un poco más elegante y seguro no usar en ningún momento ClickClick, sino vincular el evento click con javascript. Sin embargo, ese es otro problema en total.

Answer 2

Al incrustar SVG del mismo origen usando <object> , puede acceder a los contenidos internos utilizando objectElement.contentDocument.rootElement . Desde allí, puede adjuntar fácilmente manejadores de eventos (por ejemplo, a través de onclick , addEventListener() , etc.)

Por ejemplo:

var object = /* get DOM node for <object> */;
var svg = object.contentDocument.rootElement;
svg.addEventListener(''click'', function() {
  console.log(''hooray!'');
});

Tenga en cuenta que esto no es posible para elementos de <object> origen <object> origen cruzado a menos que también controle el servidor de origen <object> y pueda establecer encabezados CORS allí. Para casos de origen cruzado sin encabezados CORS, el acceso a contentDocument está bloqueado.

Answer 3

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

La solución de RGB funcionó para mí. Sin embargo, quise señalar un par de puntos que pueden ayudar a otros que llegan a este post (como yo) que no están tan familiarizados con qué SVG y quién bien podría haber generado su archivo SVG a partir de un paquete de gráficos (como yo lo hice).

Entonces para aplicar las soluciones de RGB que 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 la 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 íconos SVG en los que deseo hacer clic y la incorporación de cada uno de estos en la etiqueta SVG empezaba a ser engorrosa.

Entonces, 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 forma de pensar es que puedo usar la clase apropiada donde quiera que se necesiten los íconos y evitar una gran cantidad de código en el cuerpo del HTML que ayuda a la lectura. Y solo necesito incorporar el archivo SVG preexistente una vez.

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

<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 4

Funcionó simplemente reemplazando la etiqueta <embed/> con <img/> y eliminando el atributo de tipo.

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 el clic, 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 que en los otros navegadores también.

Answer 5

Lo conseguí trabajando en 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á, he sido un poco flojo y usé orzuelos en línea:

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

Utilicé el siguiente JavaScript para conectar un evento:

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

Answer 6

Puede tener un evento onclick en svg, lo hago todo el tiempo en mi trabajo. hacer un rect sobre el espacio de su svg, (así que defínalo por último, recuerda que svg usa el modelo de pintores)

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

luego como un atributo al rect agrega el onclick (esto se puede hacer con js o jquery también).

<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, puede implementar Google Chrome Frame. http://www.google.com/chromeframe

Answer 7

Puede usar el 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 8

Quizás lo que está buscando es la propiedad de eventos de puntero del elemento SVG, que puede leer en los documentos del grupo de trabajo de SVG w3C .

Puede usar CSS para establecer qué sucede con el elemento SVG cuando se hace clic, etc.

Answer 9

Si solo usa svg en línea no hay problema.

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" style="width: 3.5in; height: 1in">
  <circle id="circle1" r="30" cx="34" cy="34" onclick="circle1.style.fill=''yellow'';"
            style="fill: red; stroke: blue; stroke-width: 2"/>
  </svg>
  

Answer 10

Suponiendo que no necesita soporte de navegador cruzado (que es imposible sin un complemento para IE), ¿ha intentado usar svg como imagen de fondo ?

Lo experimental es seguro, pero pensé que lo mencionaría.