Número 1
Estoy tratando de cambiar el color del trazo de un svg en línea al pasar el mouse. Es una ruta exportada desde Illustrator y puesta a través del optimizador SVG de Peter Collingridge. Los artículos que leí sobre el diseño de SVG en línea son muy sencillos, pero las técnicas no funcionarán en mi SVG.
He colocado una pseudoclase flotante en la etiqueta y parece que no puedo apuntar al trazo.
<svg class="highlight" width="86" height="68" viewBox="0 0 85.7 68.5">
<polygon points="11 60.7 74.7 60.7 42.8 4.4 " style="fill:none;stroke-width:3;stroke:#491EC4"/>
</svg>
Configuré el color de fondo en rosa para comprobar que el desplazamiento funciona y está bien.
.highlight:hover {
background-color: pink;
stroke: red;
}
Aquí está en jsfiddle.
También traté de envolver el polígono en una etiqueta de uso con una identificación para cambiar el trazo en CSS, además de agregar el selector svg con trazo: heredar, como se sugiere en un artículo de Codrops. Además, el método de desplazamiento de jQuery sin suerte.
¿Qué estoy haciendo mal y por qué estas tres técnicas no funcionan?
Número 2
Sublime Text 2 no reconocerá la propiedad de trazo. Aparece en blanco cuando lo escribo en CSS y HTML. ¿Significa esto que no es válido? Miré el archivo README para un complemento CSS3 para ver qué está agregando y no hay una propiedad de “trazo”. ¿Debería usar Sublime Text 3 en versión beta?
Todas estas cosas…
Paulie_D
El CSS en el SVG es en línea CSS y así se está aplicando después su hoja de estilo y, por lo tanto, la anula.
La solución más simple es extraer el CSS del SVG y ponerlo todo en su hoja de estilo.
.highlight {
fill: none;
stroke-width: 3;
stroke: #491EC4;
}
.highlight:hover {
/* background-color: pink; */
stroke: red;
}<svg class="highlight" width="86" height="68" viewBox="0 0 85.7 68.5">
<polygon points="11 60.7 74.7 60.7 42.8 4.4 " />
</svg>la propiedad de estilo en su html sobrescribe sus selectores css. Así que incluye todas tus propiedades de estilo en el css.
Verifique el enlace jsfiddle;)
https://jsfiddle.net/ojn8r810/3/
HTML
<svg class="highlight" width="86" height="68" viewBox="0 0 85.7 68.5">
<polygon points="11 60.7 74.7 60.7 42.8 4.4 "/>
</svg>
CSS
.highlight {
fill:none;
stroke-width:3px;
stroke:#491EC4;
}
.highlight:hover {
background-color: pink;
stroke: red;
}
Lars
Deberá seleccionar la etiqueta del polígono, ya que esa etiqueta tiene un estilo para tener un trazo. Dado que ha sido decorado con un estilo en línea, su regla css debe usar !important para anular el estilo en línea.
.highlight:hover {
background-color: pink;
}
.highlight:hover polygon{
stroke: red !important;
}<svg class="highlight" width="86" height="68" viewBox="0 0 85.7 68.5">
<polygon points="11 60.7 74.7 60.7 42.8 4.4 " style="fill:none;stroke-width:3;stroke:#491EC4"/>
</svg>Descargo de responsabilidad: sería preferible extraer los estilos en línea y moverlos a sus propios archivos css (como lo menciona Paulie_D). Si de alguna manera no es posible extraer, puede ir con !important
Recomendaría encarecidamente actualizar a Sublime Text 3 (ST3) independientemente: hay una cantidad increíble de mejoras sobre 2, que se lanzó hace tres años. He estado usando 3 durante años, y es muy estable: todavía tiene la etiqueta “beta”, pero salió de la versión beta hace mucho tiempo. Todo el trabajo de desarrollo ahora se centra en ST3:
"I don't know of any good reason to not use Sublime Text 3"– Will Bond, desarrollador central de ST. Además, ST2 es ya no es la descarga predeterminada.– MattDMo
22 de junio de 2016 a las 23:08