javascript - insertar - svg css3

Patrón de formas irregulares clicables

Question

Necesito hacer un patrón de muchas formas no rectangulares . Cada forma debe ser interactiva y revelar una imagen al hacer clic.
La solicitud es tomar una imagen de una vidriera y convertirla en una página web que se llena con la imagen. Se debe poder hacer clic en cada panel, similar a los que se ven en las iglesias, pero en la primera carga cada forma es en blanco y negro y al hacer clic se revela el color del vidrio.

Imagino que esta solución abarcará 2 partes, la versión en color de toda la imagen del vitral y una versión en blanco y negro en la parte superior. Entonces, de alguna manera, cada pequeño panel de vidrio al hacer clic debe ocultar la parte en blanco y negro debajo de él para revelar la imagen en color que se encuentra debajo.

No tengo idea de cuál sería la mejor solución para hacer esto y no he encontrado nada útil para ayudar en el camino de hacer algo similar con formas y áreas interactivas aleatorias . He insertado un ejemplo a continuación del resultado, imagine que se puede hacer clic en cada parte de vidrio y al hacer clic se revela el color.

Las líneas blancas solo indican que cada panel se comporta independientemente de los demás.

Answer 1

Los mapas de área de imagen sin duda te pueden ayudar.

Echa un vistazo a this sitio web, que es una herramienta muy útil para esto.

Ejemplo

<img src="url/to/your/image.jpg" alt="" usemap="#Map" />
<map name="Map" id="Map">
    <area alt="" title="" href="LINK1" shape="poly" coords="380,163,448,127,515,163,457,205" />
    <area alt="" title="" href="LINK2" shape="poly" coords="140,13,48,1,55,13,47,12" />
</map>

Básicamente, puede asignar diferentes áreas, con diferentes enlaces, para partes de sus imágenes. ¡Es más fácil hacerlo en lugar de explicarlo! :)

Answer 2

Para hacer un patrón de polígonos irregulares seleccionables , puede usar SVG en línea con:

• el elemento SVG link <a>
• el elemento poligonal para hacer las formas

Le permitirá diseñar cualquier forma clicable y hacer que respondan.

Aquí hay un ejemplo de lo que puede hacer con un estado de enfoque y centrado para que las formas sean interactivas:

svg {
  display:block;
  width:40%; height:auto;
  margin:0 auto;
}
polygon {  
  fill:#ccc;
  stroke:#fff; stroke-width:0.3;
  transition: fill .15s;
}
a:hover .teal { fill:teal; }
a:hover .pink { fill:pink; }
a:focus .teal, 
a:focus .pink { fill:orange; }

<svg viewbox="0 0 20 19">
  <a xlink:href="#"><polygon class="teal" points="0 0 10 5 8 10 0 5" /></a>
  <a xlink:href="#"><polygon class="pink" points="0 0 10 5 15 0" /></a>
  <a xlink:href="#"><polygon class="teal" points="0 5 8 10 0 15" /></a>
  <a xlink:href="#"><polygon class="teal" points="15 0 10 5 20 19" /></a>
  <a xlink:href="#"><polygon class="pink" points="20 19 10 5 8 10" /></a>
  <a xlink:href="#"><polygon class="teal" points="20 19 8 10 0 15 8 13" /></a>
  <a xlink:href="#"><polygon class="pink" points="20 19 0 19 0 15 8 13" /></a>
  <a xlink:href="#"><polygon class="pink" points="15 0 20 19 20 20 20 0" /></a>
  <a xlink:href="#"><polygon class="teal" points="20 17 18 16 16 17 17 20 20 20" /></a>
</svg>

El elemento de polígono solo permite polígonos. Si intentas hacer formas curvas, necesitarás usar el elemento path con comandos de curva .

Answer 3

Parece que estás buscando la tag <map> .

Sin embargo, esto solo crea áreas rectangulares para hacer clic. Sin embargo, puede usar los métodos onclick de javascript para verificar si el mouse está en un área determinada. De esta manera, también puede verificar áreas circulares, áreas triangulares o básicamente un área de cualquier forma.

Answer 4

es un trabajo largo, pero esto podría ayudarlo: this

function helloWorld(area) {
  console.log(''You/'ve clicked the right part'') 
}

#container { position: relative; }
#info { 
  position: absolute;
  bottom: 90px;
  left: 85px;
  background: yellow;
  display: inline-block;
}

<section id="container">
<img src="https://i.stack.imgur.com/4KmlR.jpg" alt="" usemap="#Map" />
<map name="Map" id="Map">
    <area alt="" title="" href="javascript:helloWorld()" shape="poly" coords="66,282,73,284,79,303,78,320,49,328,48,317" />
    [...]
</map>

<span id="info">&lt;== click here</span>
</section>