Insertar SVG en web cambiar color al pasar mouse con CSS logo adidas
Fecha Publicación:
01 de Febrero de 2022
Fecha Modificación:
01 de Febrero de 2022
Aqui tenemos el primer ejemplo Insertar SVG en web y cambiar su color al pasar mouse con CSS
Vamos a insertar un grafico SVG en nuestra web y al pasar el mouse cambiaremos su color con CSS
Esta vez usaremos un logo de adidas , aqui una letra tiene la propiedad stroke por eso estamos usando jquery.
Pagina oficial de jquery https://releases.jquery.com/
<body>
<svg id="img_general" fill="currentcolor" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 302 204.27155" height="204.27" width="302" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
<g>
<g transform="matrix(21.955 0 0 -21.955 -2043.1 10481)">
<g clip-path="url(#d)">
<g transform="translate(105.72 468.11)">
<path d="m0 0c-0.639 0-1.018 0.327-1.047 0.798h0.611c0-0.157 0.087-0.366 0.465-0.379 0.262 0 0.407 0.157 0.407 0.275-0.029 0.183-0.262 0.196-0.494 0.236-0.262 0.038-0.465 0.091-0.611 0.156-0.203 0.105-0.32 0.328-0.32 0.563 0 0.419 0.35 0.746 0.96 0.746 0.582 0 0.96-0.301 0.988-0.759h-0.581c0 0.117-0.029 0.314-0.378 0.314-0.233 0-0.378-0.039-0.407-0.209 0-0.236 0.494-0.223 0.872-0.314 0.349-0.092 0.582-0.314 0.582-0.629 0-0.576-0.465-0.798-1.047-0.798"/>
</g>
</g>
</g>
<g transform="matrix(21.955 0 0 -21.955 33.537 118.8)">
<path d="m0 0 2.006 1.165 1.076-1.846h-2.704"/>
</g>
<g id="img_i" transform="matrix(21.955 0 0 -21.955 126.15 202.12)">
<path d="m0 0v2.33" />
</g>
<g transform="matrix(21.955 0 0 -21.955 -2043.1 10481)">
<g clip-path="url(#c)">
<g transform="translate(93.655 469.31)">
<path d="m0 0c0-0.366 0.32-0.667 0.668-0.667 0.379 0 0.669 0.301 0.669 0.667 0 0.353-0.29 0.667-0.669 0.667-0.348 0-0.668-0.314-0.668-0.667m0.639-1.204c-0.639 0-1.191 0.537-1.191 1.204s0.552 1.191 1.191 1.191c0.262 0 0.495-0.066 0.698-0.209v0.183h0.582v-2.316h-0.582v0.144c-0.174-0.131-0.436-0.197-0.698-0.197"/>
</g>
</g>
</g>
<g transform="matrix(21.955 0 0 -21.955 197.59 133.74)">
<path d="m0 0-2.791 4.868 2.006 1.178 3.489-6.046"/>
</g>
<g transform="matrix(21.955 0 0 -21.955 -2043.1 10481)">
<g clip-path="url(#b)">
<g transform="translate(96.33 469.31)">
<path d="m0 0c0-0.366 0.291-0.667 0.669-0.667 0.348 0 0.669 0.301 0.669 0.667 0 0.353-0.321 0.667-0.669 0.667-0.378 0-0.669-0.314-0.669-0.667m0.64-1.204c-0.669 0-1.192 0.537-1.192 1.204s0.523 1.191 1.192 1.191c0.261 0 0.494-0.066 0.698-0.209v0.981h0.581v-3.114h-0.581v0.144c-0.204-0.131-0.437-0.197-0.698-0.197"/>
</g>
</g>
</g>
<g transform="matrix(21.955 0 0 -21.955 85.247 73.119)">
<path d="m0 0 2.035 1.151 2.239-3.912h-2.123v-0.576h-0.581v0.576"/>
</g>
<g transform="matrix(21.955 0 0 -21.955 -2043.1 10481)">
<g clip-path="url(#a)">
<g transform="translate(106.39 470.7)">
<path d="m0 0c-0.146 0-0.291 0.131-0.291 0.288s0.145 0.288 0.291 0.288c0.174 0 0.291-0.131 0.291-0.288s-0.117-0.288-0.291-0.288m0 0.536c-0.146 0-0.233-0.117-0.233-0.248s0.087-0.249 0.233-0.249c0.145 0 0.232 0.118 0.232 0.249s-0.087 0.248-0.232 0.248"/>
</g>
<g transform="translate(106.45 470.83)">
<path d="m0 0-0.058 0.131h-0.058v-0.131h-0.044v0.314h0.131c0.029 0 0.087-0.04 0.087-0.092s-0.029-0.078-0.058-0.091l0.058-0.131m-0.116 0.274h-0.058v-0.104h0.058c0.058 0 0.058 0.013 0.058 0.052 0 0.027 0 0.052-0.058 0.052"/>
</g>
<g transform="translate(102.55 469.31)">
<path d="m0 0c0-0.366 0.291-0.667 0.669-0.667 0.349 0 0.668 0.301 0.668 0.667 0 0.353-0.319 0.667-0.668 0.667-0.378 0-0.669-0.314-0.669-0.667m0.639-1.204c-0.668 0-1.191 0.537-1.191 1.204s0.523 1.191 1.191 1.191c0.262 0 0.495-0.066 0.698-0.209v0.183h0.553v-2.316h-0.553v0.144c-0.203-0.131-0.436-0.197-0.698-0.197"/>
</g>
<g transform="translate(99.877 469.31)">
<path d="m0 0c0-0.366 0.32-0.667 0.669-0.667 0.378 0 0.669 0.301 0.669 0.667 0 0.353-0.291 0.667-0.669 0.667-0.349 0-0.669-0.314-0.669-0.667m1.338 1.963h0.581v-3.114h-0.581v0.144c-0.175-0.131-0.408-0.197-0.669-0.197-0.669 0-1.221 0.537-1.221 1.204s0.552 1.191 1.221 1.191c0.261 0 0.494-0.066 0.669-0.209v0.981z"/>
</g>
</g>
</g>
</g>
</svg>
</body>
Script
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#img_i").css('stroke','black');
$("#img_i").css('stroke-width','0.587');
$('#img_general').mouseover(function(){
$("#img_general").css('color','red');
$("#img_i").css('stroke','red');
});
$('#img_general').mouseout (function(){
$("#img_general").css('color','black');
$("#img_i").css('stroke','black');
});
}
)
</script>
Articulo : 1125 - Veces Leidas