Discussion :

[apdf1]

Bonjour

Je suis à la recherche d'un code pour changer la couleur du texte en même temps que la couleur du Path.
Je joint mes code HTML et Css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<path id="65"  title="Lauderdale"          fill="#B1D1A3" stroke="#284566" stroke-width="0.5"  d="M480.5,401.3l-0.7,0h-6.1v5.9h 26.9v7.8H436l0,0l0.1,26.6l0,0l0..2,402.9,481.2,402,480.5,401.3L480.5,401.3z"/>
<path id="66"  title="Limeston"              fill="#B1D1A3" stroke="#284566" stroke-width="0.5"  d="M469.6,369l-17,0.1l-1.1,2.3h-13c-0.2-0.2-0.4-0.6-0.7-0.7c0-0.3-0.4-0.5-0.5-0.8c-0.1,0-0.3-0.2-0.4-0.2c-0.3-0.1-0.5-0.3-0.8-0.3c-0.4-0.1-0.4,0-0.7,0.2c0,0.3,0,0.6,0,0.8c0,0.2-0.1,0.8-0.3,0.9l-5.5,0c0-0.2-0.1-0.3-0.1-0.4c0-0.1-0.1-0.1-0.1-0.2c-0.1-0.1-0.2-0.3-0.3-0.3c-0.2-0.2-0.5-0.4-0.7-0.3c-0.4,0.1-0.4,0.7-0.59,469.6,369z"/>
<path id="67"  title="Madison"         fill="#B1D1A3" stroke="#284566" stroke-width="0.5"  d="M458.3,319.3l5.1,30.5c0,0.5-0.2,0.9-0.5,1.3c-0.3,0.5,0.9,3.5,1,4.2c0.4,1.4,0.7,2.9,1.1.3,319.3z"/>
 
<text transform="matrix(1 0 0 1 148.251 72.3003)"> <tspan x="-5.6" y="0" class="texte"> Lauderdale</tspan></text>
<text transform="matrix(1 0 0 1 226.5005 80.2905)">          <tspan x="-4" y="0"   class="texte"> Limeston</tspan></text>
<text transform="matrix(1 0 0 1 279.4019 87.4546)">          <tspan x="-5" y="0"   class="texte"> Madison</tspan></text>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/*  Changement de couleur au passage de la souris*/
.map__image  {
    width: 100%;
  /* float: left;*/
    margin-left: -80px;
    margin-top: 10px;
}
 
.map__image path {
    fill: #B1D1A3;
    stroke: #006400;     /*#3CB371*/
    stroke-width: 2px;
    transition: fill 0.1s;
}
.map__image path:hover{
    fill:#006400;
}

Je vous remercie d'avance

Max

[Invité]

Bonjour,

Une solution en CSS :

1/ modifier le HTML pour que le texte soit juste après le path associé.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<path id="65"  title="Lauderdale".../>
<text transform="matrix(1 0 0 1 148.251 72.3003)"> <tspan x="-5.6" y="0" class="texte"> Lauderdale</tspan></text>
 
<path id="66"  title="Limeston" .../>
<text transform="matrix(1 0 0 1 226.5005 80.2905)">          <tspan x="-4" y="0"   class="texte"> Limeston</tspan></text>
 
<path id="67"  title="Madison".../>
<text transform="matrix(1 0 0 1 279.4019 87.4546)">          <tspan x="-5" y="0"   class="texte"> Madison</tspan></text>

Puis:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.map__image path:hover ~ text tspan.texte {
    color:#006400;
}

[apdf1]

Re,

J'ai fait comme tu me dit mais sa ne fonctionne pas?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<path id="01"  title="Geneva"           fill="#B1D1A3" stroke="#284566" stroke-width="0.5"  d="M346,586.9 353.8,586.9 353.8,589 356,589 356,586.9 394.1,586.9 394.1,586.9 405.1,586.9 405.1,586.9 431.7,586.8 431.7,619.1 431.7,619.1 346,618.9 346,618.9 346,586.9 "/>
<text transform="matrix(1 0 0 1 373.9082 608.4766)">   <tspan x="0" y="0"    class="texte"> Geneva</tspan></text>
        <path id="02"  title="Dale"             fill="#B1D1A3" stroke="#284566" stroke-width="0.5"  d="M394.1,586.9h11l0,0l2.9-6.1c0.8-1.7,0.2-5.3,1.5-6.4l0-0.2c1.8-0.9,2.3,0,4,0.4c3.4,0.7,7.1,2.4,10.6,2.5c1.5,0.1,2.7,0.1,4.2,0c0.6,0,2.6-0.4,3.1-0.1v-4.3h7.4v-3.9h0l0.1-41.5l0,0l-38.4,0l0,0h-6.4l0,0L394.1,586.9L394.1,586.9z"/>
<text transform="matrix(1 0 0 1 404.2158 553.0957)">   <tspan x="0" y="0"    class="texte"> Dale</tspan></text> 
        <path id="03"  title="Coffee"           fill="#B1D1A3" stroke="#284566" stroke-width="0.5"  d="M346,586.9 353.8,586.9 353.8,589 356,589 356,586.9 394.1,586.9 394.1,586.9 394.1,527.3 394.1,527.3 351.7,527.8 351.7,527.8 351.7,539 350.7,539 350.7,540 346.1,540 346.1,552.5 346.1,552.5 346,586.9 "/>
 <text transform="matrix(1 0 0 1 355.1719 563.5664)"><tspan x="0" y="0"    class="texte"> Coffee</tspan></text>
        <path id="04"  title="Covington"        fill="#B1D1A3" stroke="#284566" stroke-width="0.5"  d="M346.1,552.5l-0.2,34.4l0,0v32l0,0l-60.6-0.1l0,0l-0.4-31.5l0,0l-0.1-21c0.5-0.1,1.4-0.4,1.9-0.7c0.4-0.3,0.9-1,1.3-1.2c0-0.3,0.5-0.9,0.6-1.3c0.1-0.4,0.3-1,0.3-1.4c0.1-1.1,0.2-2.1,0.2-3.2c0-1.5-0.5-4.1-1.1-5.4h-3.2v-12.4l0,0h24.5l0,0l10.8,0l0.5,10.1l1.5-0.6c0.6-0.4,1.3-1.1,1.9-1.6c0.7-0.5,0.8-1.2,1.2-1.8c1-1.3,3.1-1,4.1-2.5l1.6-2.4c0.2-0.2,0.9-0.8,1-1c0.2-0.1,0.7-0.6,1-0.7h2.7v10.2h1.8v2H346.1L346.1,552.5z"/>

[Invité]

Actuellement, tu utilises une balise "auto-fermante" <path ... /> (comme les balises <br />, <img ... /> ou <input ... />).
Il semble qu'elle n'est pas reconnue comme telle.

Le code CSS fonctionne avec 2 balises, 1 "ouvrante" + 1 "fermante" :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<path................></path>

[apdf1]

Re,

J'ai suivi ton conseille j'ai donc mis à la fin de mon <path................></path>

Mais sa ne donne rien?

[NoSmoking]

Bonjour,

Le code CSS fonctionne avec 2 balises, 1 "ouvrante" + 1 "fermante"

cette balise est bien auto-fermante.

Il ne faut pas jouer sur la propriété color mais fill

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
path:hover {
  fill: red;
}
path:hover ~ text {
  fill: yellow;
}

Pour éviter la propagation du sélecteur ~ (tilde) il est souhaitable de mettre un conteneur <g>.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<svg>
  <g>
    <path/>
    <text><tspan></tspan></text>
  </g>
  <g>
    <path/>
    <text><tspan></tspan></text>
  </g>
</svg>

[apdf1]

Bonjour NoSmoking

Je te remercie sa fonctionne nickel mais avec le conteneur <g>. sinon sa fou le bordel.
Mais juste une petite question pourquoi je ne peu pas changer de couleur sur la class avant quelle soit hover?

Merci et bonne soirée

[NoSmoking]

je ne comprends pas ce que tu essaies de faire.

PS : tu en es où dans cette discussion Cacher ou afficher plusieurs Id