Estamos construyendo un pequeño sitio web donde puede resaltar partes de una imagen usando jquery.maphilight.js . La imagen de fondo es un archivo SVG y tenemos un script que exporta las coordenadas de polígono correctas para los polígonos superpuestos a html. Desafortunadamente, todos los polígonos resaltados se ven borrosos (no la imagen de fondo SVG, está bien). ¿Por qué es eso y qué podemos hacer al respecto?
Aquí está el código html:
<!DOCTYPE html> <html> <head> <title> My First Website </title> <style> h1 { text-align: center; } h2 { text-align: center; } p { text-align: center; } div.map { display: block; margin-left: auto; margin-right: auto; } </style> <meta charset="UTF-8"> // ... <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="jquery.maphilight.js"></script> <script> $(function() { $('.map').maphilight({ fillColor: '008800' }); $('#abcde').click(function(e) { e.preventDefault(); var data = $(this).mouseout().data('maphilight') || {}; data.alwaysOn = !data.alwaysOn; $(this).data('maphilight', data).trigger('alwaysOn.maphilight'); }); }); </script> </head> <h1><u>title...</u></h1> <h2>subtitle...</h2> <br> <p> <img src="assets/background.svg" alt="background..." height="X" width="600" class="map" usemap="#features"> <map name="features"> <area id="abcde" shape="poly" coords="483.5,233.5,483.5,237.5,485.5,240.5,485.5,244.5,484.5,246.5,484.5,247.5,484.5,250.5,485.5,251.5,486.5,251.5,487.5,251.5,490.5,251.5,492.5,251.5,492.5,249.5,492.5,245.5,491.5,244.5,491.5,241.5,494.5,237.5,494.5,234.5,493.5,233.5,493.5,233.5,491.5,232.5,489.5,231.5,487.5,231.5,485.5,232.5" href="#" alt="left_hand_ip5" class="group" data-maphilight='{"strokeColor":"000000","strokeWidth":0,"fillColor":"000000","fillOpacity":1}'> // ... </map> </p> </body> </html> El desplazamiento de .5 de todas las coordenadas es solo una de las cosas que hemos intentado para deshacernos de la borrosidad, pero no funciona de esta manera, ni con coordenadas redondas.
Nota: Somos completos principiantes con javascript, html y css.