Estoy escribiendo un programa editor de SVG. Estoy tratando de implementar una sensación resaltada cuando se hace clic en un elemento ( <image> , no <img> ). He implementado esto para otros elementos como <circle> , configurando stroke , stroke-width y stroke-dash-array . Pero la configuración de los atributos de presentación de la etiqueta <image> , ya sea al configurar los atributos directamente o mediante el estilo CSS, no tiene efecto. También probé el estilo de borde pero no funciona. ¿Cómo puedo conseguir esto?
De acuerdo con MDN , <image> debe tener atributos globales, incluida la presentación, lo que en última instancia significa que esto debería funcionar. Si también inspecciona <image> con un navegador, verá que se resaltará como sigue al modelo de caja.
<svg viewBox="0 0 1370 1170" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <image width="128" height="128" x="617.9207153320312" href="data:some-valid-link" style="stroke-width: 3px; stroke-dasharray: 7px;" stroke="#3aa2c2"></image> </svg>No creo que puedas establecer un trazo en una imagen.
Por lo general, esos atributos se utilizan para 'dibujar' imágenes vectoriales. Aquí está tratando de poner un trazo en una imagen rasterizada.
Si desea colocar líneas alrededor de una imagen cuadrada, puede usar un borde para lograrlo.
Si desea colocar líneas alrededor de una forma complicada, no creo que sea posible hacerlo en CSS. Necesitaría agregar eso en el software de gráficos.
No puede cambiar el estilo de un SVG externo si lo carga en una etiqueta <img> .
En su lugar, podría pegar el código <svg> directamente en su HTML y aplicar estilos como este ( source svg ):
svg { width: 500px; } svg path, svg polygon { stroke-width: 10px; stroke-dasharray: 10px; } <svg height="210" width="500"> <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;"/> Sorry, your browser does not support inline SVG. </svg>Necesitaría un SVG con un código más específico dirigido a todos los vectores y no solo a una etiqueta. Luego, podría hacer grupos de las partes de la imagen/dibujo que desea diseñar. Puede hacer esto usando Illustrator, luego, después de agrupar las partes, su código tendrá una etiqueta 'g': <g id="group_to_style" > con una ID que haya nombrado al hacer los grupos. Luego, al usar CSS, puede apuntar a los grupos de SVG y diseñar o incluso animar. Como dijo gru, con un no puedes diseñar o animar nada.