Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

144
Views
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 answers
Answer question

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!