11521 sujets

JavaScript, DOM et API Web HTML5

Image svg et jquery ou javascript

Bonjour à tous, je viens vers vous pour un problème je voudrais échanger des couleurs le rose par le bleu et inversement et vert par gris et inversment sur une image "svg" quand je survol le logo et je n'arrive pas à le faire en javascript ni en jquery et en css sa ne marche quand passant sur mes carrés. merci de votre aide

code html :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exercice 1</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="animation.js"></script>
<script>

</script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 275.83 58.36">
<defs>
<style>.cls-1{font-size:48px;fill:#3c3c3b;stroke:#3c3c3b;
stroke-miterlimit:10;
stroke-width:2px;font-family:TrebuchetMS, Trebuchet MS;}.cls-2{font-size:11px;
fill:#706f6f;font-family:Verdana, Verdana;}
.cls-3{letter-spacing:-0.02em;}
.cls-4{fill:url(#Dégradé_sans_nom_22);}
.cls-5{fill:url(#Dégradé_sans_nom_30);}
.cls-6{fill:url(#Dégradé_sans_nom_35);}
.cls-7{fill:url(#Dégradé_sans_nom_43);}
</style>

<linearGradient id="Dégradé_sans_nom_22" x1="117.13" y1="38.63" x2="146.82" y2="8.95" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#db73ab"/>
<stop offset="1" stop-color="#d6007f"/>
</linearGradient><linearGradient id="Dégradé_sans_nom_30" x1="158.79" y1="38.63" x2="188.47" y2="8.95" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#a8c813"/>
<stop offset="0.51" stop-color="#81bc23"/>
<stop offset="1" stop-color="#5fb130"/>
</linearGradient><linearGradient id="Dégradé_sans_nom_35" x1="199.68" y1="38.63" x2="229.37" y2="8.95" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#69c8f3"/>
<stop offset="0.65" stop-color="#22a7d9"/>
<stop offset="1" stop-color="#0097cc"/>
</linearGradient><linearGradient id="Dégradé_sans_nom_43" x1="240.58" y1="38.63" x2="270.26" y2="8.95" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#69c8f3"/>
<stop offset="0" stop-color="#cecece"/>
<stop offset="0.59" stop-color="#989898"/>
<stop offset="1" stop-color="#777776"/>
</linearGradient>
</defs>

<title>logocefii</title><g id="Cefii">
<text class="cls-1" transform="translate(1 42.16)">CEFii</text>
</g><g id="Texte">
<text class="cls-2" transform="translate(1 55.02) scale(0.82 1)">Centre d’Études et de <tspan class="cls-3" x="123.73" y="0">F</tspan><tspan x="129.79" y="0">ormation en informatique et Internet</tspan></text>

</g><g id="Rose">
<rect class="cls-4" x="113.61" y="5.42" width="36.73" height="36.73" rx="12" ry="12" mouseover="changeColor(evt);"/>
</g><g id="Vert">
<rect class="cls-5" x="155.26" y="5.42" width="36.73" height="36.73" rx="12" ry="12"/>
</g><g id="Bleu">
<rect class="cls-6" x="196.16" y="5.42" width="36.73" height="36.73" rx="12" ry="12"/>
</g><g id="Gris">
<rect class="cls-7" x="237.05" y="5.42" width="36.73" height="36.73" rx="12" ry="12"/>
</g></svg>


</body>
</html>
Modérateur
En simple CSS c'est tout à fait faisable.
Il suffit de remplacer le dégradé des carré au survol du svg...

.cls-4{fill:url(#Dégradé_sans_nom_22);}
.cls-5{fill:url(#Dégradé_sans_nom_30);}
.cls-6{fill:url(#Dégradé_sans_nom_35);}
.cls-7{fill:url(#Dégradé_sans_nom_43);}

svg:hover .cls-4{fill:url(#Dégradé_sans_nom_22b);}
svg:hover .cls-5{fill:url(#Dégradé_sans_nom_30b);}
svg:hover .cls-6{fill:url(#Dégradé_sans_nom_35b);}
svg:hover .cls-7{fill:url(#Dégradé_sans_nom_43b);}


https://jsfiddle.net/o0wq4Lx3/

Tu devrai utiliser des nom un poil plus explicites que "Dégradé_sans_nom_22" ca serait vachement plus simple à maîtriser !!! Smiley lol
merci pour ta reponse laurent c'est ce que j'ai fais et sa marche tres bien sauf que pour mon exercice on me demande de le faire en jquery ou javascript Smiley ohwell
le changement de couleur.
var hover = function() {
  this.fill({ color: 'rose' })
}

element.on('click', hover)

element.addEventListener('evenement',function()

Modifié par summer123 (28 Mar 2018 - 17:16)
Sujet clos
Aller à