[SVG] Existe-t-il des fonctions avancées de positionnement de texte dans un svg?

**alexis_c** · 01/12/2022, 14h51

Bonjour,

Je cherche à positionné du texte dans un SVG. pour l'instant j'utilise les attributs 'x' et 'y' pour le faire mais cela m'oblige à positionné chaque élément de texte indépendamment.
Pouvez vous me dire si il existe des moyens de positionnement type 'grid' ou 'flex' pour le positionnement des textes dans un SVG?
Ou si il existe une possibilité d'utilisé ces positionnements CSS dans du SVG?
Et quel en est la syntaxe?

En vous remerciant par avance

**alexis_c** · 02/12/2022, 08h51

Trouvé:
La balise foreignObject permet d'encapsulé le html dans le svg, et donc d'utilisé les positionnements grid et flex dans le svg, ainsi que d'avoir les polices standard.
il faut juste faire attention a ajusté les dimensions des règles css
code exemple:

Code html :

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
 
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <title></title>
<style>
.wrapperSvg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 2px;
  grid-auto-rows: minmax(2px, auto);
}
.wrapperSvg > div {
  border: 0.4px solid #ffa94d;
  border-radius: 1px;
  background-color: #ffd8a8;
  padding: 1px;
  color: #d9480f;
  font-size:4px;
}
.wrapperHtml {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(10px, auto);
}
.wrapperHtml > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
  font-size:20px;
}
 
 
</style>
  </head>
  <body>
    <header></header>
    <main>
<table>
<td>
----------------------------------
         Grid ans le svg
----------------------------------
 
				<svg width="500px" height="500px" viewBox="0 0 100 100">
					<rect width="100%" height="100%" fill="red" stroke="transparent" stroke-width="0px"/><!-- Pour visualisation du viewBox-->
					<text
						x="50"
						y="50"
						font-size="50"
						file="darkblue"
						stroke="blue"
						stroke-width="3"
						text-anchor="middle"
						>
						SVG
					</text>
 <!-- Cas d'utilisation courant: inclure du texte HTML dans le SVG -->
  <foreignObject x="20" y="20" width="60" height="60">
    <!--
      Dans le cas d'un SVG intégré dans du HTML, le namespace XHTML peut
      être omis, mais il est obligatoire dans le contexte d'un document SVG
    -->
    <div xmlns="http://www.w3.org/1999/xhtml">
<div class="wrapperSvg">
  <div>Un</div>
  <div>Deux</div>
  <div>Trois</div>
  <div>Quatre
    <br>Cette cellule
    <br>a du contenu
    <br>supplémentaire
    <br>et max vaut auto
    <br>afin que la ligne
    <br>se développe.
  </div>
  <div>Five</div>
</div>
    </div>
  </foreignObject>
 
				</svg>
</td>
<td  width="500px" height="500px">
------------------------------
     Grid ans le html
------------------------------
<div class="wrapperHtml">
  <div>Un</div>
  <div>Deux</div>
  <div>Trois</div>
  <div>Quatre
    <br>Cette cellule
    <br>a du contenu
    <br>supplémentaire
    <br>et max vaut auto
    <br>afin que la ligne
    <br>se développe.
  </div>
  <div>Five</div>
</div>
</td>
</table>
    </main>
    <footer></footer>
  </body>
</html>

[SVG] Existe-t-il des fonctions avancées de positionnement de texte dans un svg?

HTML

Discussions similaires

Partager

Partager