bonjour à toutes & à tous.
j'ai un svg qui entoure un texte ("$text"), mais si le texte est plus long, je souhaiterai que le svg s'agrandisse aussi, ainsi qu'au survol de la souris :hover.
Le svg est défini de manière empirique comme ci-dessous
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13 <div class="entoure" style="width: 175px; height: auto; "> <?php $text= "Milieu"; $long= 20*strlen($text); ?> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 <?=$long ?> 45" class="svg" style="background-color: #f0a591;"> <path d ="M <?=$long-25 ?> 43 a20 20 0 0 0 0 -40 H25 a20 20 0 1 0 0 40 " class="style1"/> <path d ="M 25 43 H<?=$long-25 ?>" class="style2"/> <g style="font-family:'Trebuchet MS', 'Lucida Sans Unicode'; font-size: 2em; fill:aqua;"> <text class="texte" style="text-anchor:middle; " dominant-baseline="middle" x="50%" y="56%" ><?=$text ?></text> </g> </svg> </div>
avec les style css ci dessous:
ma difficulté est de modifier dynamiquement les valeurs de stroke-dasharray et de stroke-dashoffset en fonction de la longueur du $text lors du survol de la souris:
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
18
19
20
21
22
23
24
25
26
27 .entoure:hover, .entoure:hover .svg .style1{ cursor: pointer; stroke: blue; stroke-dasharray: 325; stroke-dashoffset: 0; } .entoure:hover .svg .texte{ fill: yellow; /* La couleur de lintérieur des lettres */ stroke: red; /* La couleur du contour des lettres */ } .style1{ stroke : red/* transparent */; stroke-width: 4px; fill: none; transition-timing-function: linear; stroke-dashoffset: 325; transition: stroke-dashoffset 2s; } .style2{ stroke : blue; stroke-width: 4px; fill: none; }
si vous avez une idée, je suis preneur.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14 .entoure:hover, .entoure:hover .svg .style1{ stroke-dasharray: 325; /* en fonction de la longueur du $text */ ; stroke-dashoffset: 0; } .style1{ stroke : red/* transparent */; stroke-width: 4px; fill: none; transition-timing-function: linear; stroke-dashoffset: 325; /* en fonction de la longueur du $text */ transition: stroke-dashoffset 2s; }
merci d'avance
kolbyt (apprenti sorcier)
Partager