Discussion :

[kolbyt]

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:

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 l’inté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;
}

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
.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;
}

si vous avez une idée, je suis preneur.
merci d'avance
kolbyt (apprenti sorcier)

[NoSmoking]

Bonjour,
as-tu essayé de mettre des valeurs en pourcentage ?