Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

136
Vistas
Svg para poder hacer clic y no interferir con YouTube

Tengo un problema con el svg en YouTube.

Si coloca el mouse sobre, justo al lado derecho del svg y hace clic, el video no se abre, sino que lo lleva de regreso a la página anterior.

Al hacer clic en el espacio entre el svg, que debería abrir el video de YouTube, no lo hace, sino que lo lleva de regreso a la página anterior.

Todo lo que esté fuera del svg debería ser YouTube.

Solo se debe hacer clic en el área dentro de la línea roja para llevar al usuario a Inicio

pointer-events: none; tendría que estar en su lugar, o interfiere con el video de YouTube.

El problema con el uso de:

 svg.home { pointer-events: none; }

Si bien eso funciona con el svg que no interfiere, también deshabilita la posibilidad de hacer clic en el svg.

¿Cómo se arreglaría esto?

Necesito que se pueda hacer clic en el svg y que no interfiera con YouTube.

https://jsfiddle.net/hwm8qtoz/1/

 .home { position: absolute; top: calc(60% - 25px); /*25px is half the height of the svg*/ left: 0px; width: 50px; height: 50px; fill: green; cursor: pointer; }

ingrese la descripción de la imagen aquí

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Porque CSS tiene un cuadro modal y todo es un cuadro. Entonces, toda la casa está dentro de una caja y se puede hacer clic en toda la caja o no se puede hacer clic en toda la caja.

Se puede solucionar de dos formas

  1. Puede dividir su Home SVG en múltiples svgs. por ejemplo, 3 partes = (techo de la casa + lado izquierdo de la casa + lado derecho de la casa). Organice estos svgs de tal manera que se vea como la casa y luego haga que se pueda hacer clic en el padre de estos SVGs que lo lleva a la página anterior.
  2. Cree su SVG usando múltiples rutas y haga clic en cada ruta individualmente (llevando al usuario a la página anterior). Vea esto para una idea http://thenewcode.com/696/Using-SVG-as-an-Alternative-To-Imagemaps
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda