rotation libre svg

**radjiv97441** · 19/11/2022, 13h21

Bonjour, j'ai un angle formé par deux segments (rouge et vert), est-il possible de tourner le rapporteur de sorte à mesurer l'angle géométrique par simple lecture ? L'utilisation d'une variable est-il possible pour afficher des inclinaisons aléatoires ?
Si vous avez une meilleure idée je suis aussi 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
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
 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300px" height="300px" viewBox="0 0 600 600">
<g fill="none" stroke="#000" stroke-linecap="round">
    <circle cx="300" cy="300" r="275"/>
    <path d="M300,300h300" transform="rotate(120 300 300)" stroke="red" stroke-width="3px"/>
    <path d="M300,300h300" transform="rotate(40 300 300)" stroke="green" stroke-width="3px"/>
 
    <path stroke-width="0.75" d="M285,300h30 M300,285v30"/>
    <g>
      <path id="deg10" d="M25,300h40 M102,300h180 M318,300h180 M535,300h40 M300,25v40 M300,102v180 M300,318v180 M300,535v40"/>
      <use xlink:href="#deg10" transform="rotate(10 300 300)"/>
      <use xlink:href="#deg10" transform="rotate(20 300 300)"/>
      <use xlink:href="#deg10" transform="rotate(30 300 300)"/>
      <use xlink:href="#deg10" transform="rotate(40 300 300)"/>
      <use xlink:href="#deg10" transform="rotate(50 300 300)"/>
      <use xlink:href="#deg10" transform="rotate(60 300 300)"/>
      <use xlink:href="#deg10" transform="rotate(70 300 300)"/>
      <use xlink:href="#deg10" transform="rotate(80 300 300)"/>
    </g>
    <g>
      <path id="deg5" stroke-width="0.75" transform="rotate(5 300 300)" d="M25,300h20 M142,300h20 M438,300h20 M555,300h20 M300,25v20 M300,142v20 M300,438v20 M300,555v20"/>
      <use xlink:href="#deg5" transform="rotate(10 300 300)"/>
      <use xlink:href="#deg5" transform="rotate(20 300 300)"/>
      <use xlink:href="#deg5" transform="rotate(30 300 300)"/>
      <use xlink:href="#deg5" transform="rotate(40 300 300)"/>
      <use xlink:href="#deg5" transform="rotate(50 300 300)"/>
      <use xlink:href="#deg5" transform="rotate(60 300 300)"/>
      <use xlink:href="#deg5" transform="rotate(70 300 300)"/>
      <use xlink:href="#deg5" transform="rotate(80 300 300)"/>
      <g id="gdeg1">
        <path id="deg1" stroke-width="0.4" transform="rotate(1 300 300)" d="M25,300h10 M147,300h10 M443,300h10 M565,300h10 M300,25v10 M300,147v10 M300,443v10 M300,565v10"/>
        <use xlink:href="#deg1" transform="rotate(1 300 300)"/>
        <use xlink:href="#deg1" transform="rotate(2 300 300)"/>
        <use xlink:href="#deg1" transform="rotate(3 300 300)"/>
        <use xlink:href="#deg1" transform="rotate(5 300 300)"/>
        <use xlink:href="#deg1" transform="rotate(6 300 300)"/>
        <use xlink:href="#deg1" transform="rotate(7 300 300)"/>
        <use xlink:href="#deg1" transform="rotate(8 300 300)"/>
      </g>
      <use xlink:href="#gdeg1" transform="rotate(10 300 300)"/>
      <use xlink:href="#gdeg1" transform="rotate(20 300 300)"/>
      <use xlink:href="#gdeg1" transform="rotate(30 300 300)"/>
      <use xlink:href="#gdeg1" transform="rotate(40 300 300)"/>
      <use xlink:href="#gdeg1" transform="rotate(50 300 300)"/>
      <use xlink:href="#gdeg1" transform="rotate(60 300 300)"/>
      <use xlink:href="#gdeg1" transform="rotate(70 300 300)"/>
      <use xlink:href="#gdeg1" transform="rotate(80 300 300)"/>
    </g>
 
  </g> 
  <g id="text" font-size="14">
    <text transform="matrix(1 0 0 1 294.5425 90.5198)">0</text>
    <text transform="matrix(1 0 0 1 326.793 93.6399)">10</text>
    <text transform="matrix(1 0 0 1 363.3828 103.2209)">20</text>
    <text transform="matrix(1 0 0 1 397.4199 119.0012)">30</text>
    <text transform="matrix(1 0 0 1 428.4355 140.4602)">40</text>
    <text transform="matrix(1 0 0 1 454.8281 166.9172)">50</text>
    <text transform="matrix(1 0 0 1 476.5371 197.5813)">60</text>
    <text transform="matrix(1 0 0 1 492.4297 231.5452)">70</text>
    <text transform="matrix(1 0 0 1 502.3496 267.7805)">80</text>
    <text transform="matrix(1 0 0 1 505.7383 305.1663)">90</text>
    <text transform="matrix(1 0 0 1 497.4414 342.5715)">100</text>
    <text transform="matrix(1 0 0 1 487.8613 378.8674)">110</text>
    <text transform="matrix(1 0 0 1 472.082 412.9309)">120</text>
    <text transform="matrix(1 0 0 1 450.623 443.7258)">130</text>
    <text transform="matrix(1 0 0 1 424.166 470.3469)">140</text>
    <text transform="matrix(1 0 0 1 393.5039 491.9963)">150</text>
    <text transform="matrix(1 0 0 1 359.541 507.9875)">160</text>
    <text transform="matrix(1 0 0 1 323.3066 517.7952)">170</text>
    <text transform="matrix(1 0 0 1 285.9224 521.1467)">180</text>
    <text transform="matrix(1 0 0 1 248.5181 518.0256)">190</text>
    <text transform="matrix(1 0 0 1 212.5151 508.4436)">200</text>
    <text transform="matrix(1 0 0 1 178.4526 492.6643)">210</text>
    <text transform="matrix(1 0 0 1 147.6582 471.2053)">220</text>
    <text transform="matrix(1 0 0 1 121.0376 444.7463)">230</text>
    <text transform="matrix(1 0 0 1 99.3882 414.0852)">240</text>
    <text transform="matrix(1 0 0 1 83.3975 380.1213)">250</text>
    <text transform="matrix(1 0 0 1 73.5908 343.884)">260</text>
    <text transform="matrix(1 0 0 1 70.2397 306.4993)">270</text>
    <text transform="matrix(1 0 0 1 73.3599 269.095)">280</text>
    <text transform="matrix(1 0 0 1 82.9409 232.7981)">290</text>
    <text transform="matrix(1 0 0 1 98.6973 198.7346)">300</text>
    <text transform="matrix(1 0 0 1 120.1563 167.9387)">310</text>
    <text transform="matrix(1 0 0 1 146.6128 141.3186)">320</text>
    <text transform="matrix(1 0 0 1 177.2754 119.6692)">330</text>
    <text transform="matrix(1 0 0 1 211.2378 103.678)">340</text>
    <text transform="matrix(1 0 0 1 247.4731 93.8694)">350</text>
  </g>
</svg>

merci de votre participation à l'avance.

**wheel** · 22/11/2022, 10h47

Tu veux que le rapporteur s'aligne sur l'orientation d'une la ligne ?
si oui tu pourrais utiliser le rapporteur comme marker-start pour cette ligne https://www.w3.org/TR/SVG2/painting....rStartProperty

Ajouter marker-start="url(#Rapport)" au path en question pour dessiner le rapporteur

Code svg :

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
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300px" height="300px" viewBox="0 0 600 600">
 <defs>
  <marker id="Rapport" orient="auto"  markerWidth="150 " markerHeight="150" 
          viewBox="-275 -275 550 550">
    <g fill="none" stroke="#000" stroke-linecap="round" 
	   transform="translate(-300 -300) rotate(90 300 300)"  > 
    <circle cx="300" cy="300" r="275"/>
    <path stroke-width="0.75" d="M285,300h30 M300,285v30"/>
    <g>
      <path id="deg10" d="M25,300h40 M102,300h180 M318,300h180 M535,300h40 M300,25v40 M300,102v180 M300,318v180 M300,535v40"/>
      <use xlink:href="#deg10" transform="rotate(10 300 300)"/>
      <use xlink:href="#deg10" transform="rotate(20 300 300)"/>
      <use xlink:href="#deg10" transform="rotate(30 300 300)"/>
      <use xlink:href="#deg10" transform="rotate(40 300 300)"/>
      <use xlink:href="#deg10" transform="rotate(50 300 300)"/>
      <use xlink:href="#deg10" transform="rotate(60 300 300)"/>
      <use xlink:href="#deg10" transform="rotate(70 300 300)"/>
      <use xlink:href="#deg10" transform="rotate(80 300 300)"/>
    </g>
    <g>
      <path id="deg5" stroke-width="0.75" transform="rotate(5 300 300)" d="M25,300h20 M142,300h20 M438,300h20 M555,300h20 M300,25v20 M300,142v20 M300,438v20 M300,555v20"/>
      <use xlink:href="#deg5" transform="rotate(10 300 300)"/>
      <use xlink:href="#deg5" transform="rotate(20 300 300)"/>
      <use xlink:href="#deg5" transform="rotate(30 300 300)"/>
      <use xlink:href="#deg5" transform="rotate(40 300 300)"/>
      <use xlink:href="#deg5" transform="rotate(50 300 300)"/>
      <use xlink:href="#deg5" transform="rotate(60 300 300)"/>
      <use xlink:href="#deg5" transform="rotate(70 300 300)"/>
      <use xlink:href="#deg5" transform="rotate(80 300 300)"/>
      <g id="gdeg1">
        <path id="deg1" stroke-width="0.4" transform="rotate(1 300 300)" d="M25,300h10 M147,300h10 M443,300h10 M565,300h10 M300,25v10 M300,147v10 M300,443v10 M300,565v10"/>
        <use xlink:href="#deg1" transform="rotate(1 300 300)"/>
        <use xlink:href="#deg1" transform="rotate(2 300 300)"/>
        <use xlink:href="#deg1" transform="rotate(3 300 300)"/>
        <use xlink:href="#deg1" transform="rotate(5 300 300)"/>
        <use xlink:href="#deg1" transform="rotate(6 300 300)"/>
        <use xlink:href="#deg1" transform="rotate(7 300 300)"/>
        <use xlink:href="#deg1" transform="rotate(8 300 300)"/>
      </g>
      <use xlink:href="#gdeg1" transform="rotate(10 300 300)"/>
      <use xlink:href="#gdeg1" transform="rotate(20 300 300)"/>
      <use xlink:href="#gdeg1" transform="rotate(30 300 300)"/>
      <use xlink:href="#gdeg1" transform="rotate(40 300 300)"/>
      <use xlink:href="#gdeg1" transform="rotate(50 300 300)"/>
      <use xlink:href="#gdeg1" transform="rotate(60 300 300)"/>
      <use xlink:href="#gdeg1" transform="rotate(70 300 300)"/>
      <use xlink:href="#gdeg1" transform="rotate(80 300 300)"/>
    </g> 
  <g id="text" font-size="14">
    <text transform="matrix(1 0 0 1 294.5425 90.5198)">0</text>
    <text transform="matrix(1 0 0 1 326.793 93.6399)">10</text>
    <text transform="matrix(1 0 0 1 363.3828 103.2209)">20</text>
    <text transform="matrix(1 0 0 1 397.4199 119.0012)">30</text>
    <text transform="matrix(1 0 0 1 428.4355 140.4602)">40</text>
    <text transform="matrix(1 0 0 1 454.8281 166.9172)">50</text>
    <text transform="matrix(1 0 0 1 476.5371 197.5813)">60</text>
    <text transform="matrix(1 0 0 1 492.4297 231.5452)">70</text>
    <text transform="matrix(1 0 0 1 502.3496 267.7805)">80</text>
    <text transform="matrix(1 0 0 1 505.7383 305.1663)">90</text>
    <text transform="matrix(1 0 0 1 497.4414 342.5715)">100</text>
    <text transform="matrix(1 0 0 1 487.8613 378.8674)">110</text>
    <text transform="matrix(1 0 0 1 472.082 412.9309)">120</text>
    <text transform="matrix(1 0 0 1 450.623 443.7258)">130</text>
    <text transform="matrix(1 0 0 1 424.166 470.3469)">140</text>
    <text transform="matrix(1 0 0 1 393.5039 491.9963)">150</text>
    <text transform="matrix(1 0 0 1 359.541 507.9875)">160</text>
    <text transform="matrix(1 0 0 1 323.3066 517.7952)">170</text>
    <text transform="matrix(1 0 0 1 285.9224 521.1467)">180</text>
    <text transform="matrix(1 0 0 1 248.5181 518.0256)">190</text>
    <text transform="matrix(1 0 0 1 212.5151 508.4436)">200</text>
    <text transform="matrix(1 0 0 1 178.4526 492.6643)">210</text>
    <text transform="matrix(1 0 0 1 147.6582 471.2053)">220</text>
    <text transform="matrix(1 0 0 1 121.0376 444.7463)">230</text>
    <text transform="matrix(1 0 0 1 99.3882 414.0852)">240</text>
    <text transform="matrix(1 0 0 1 83.3975 380.1213)">250</text>
    <text transform="matrix(1 0 0 1 73.5908 343.884)">260</text>
    <text transform="matrix(1 0 0 1 70.2397 306.4993)">270</text>
    <text transform="matrix(1 0 0 1 73.3599 269.095)">280</text>
    <text transform="matrix(1 0 0 1 82.9409 232.7981)">290</text>
    <text transform="matrix(1 0 0 1 98.6973 198.7346)">300</text>
    <text transform="matrix(1 0 0 1 120.1563 167.9387)">310</text>
    <text transform="matrix(1 0 0 1 146.6128 141.3186)">320</text>
    <text transform="matrix(1 0 0 1 177.2754 119.6692)">330</text>
    <text transform="matrix(1 0 0 1 211.2378 103.678)">340</text>
    <text transform="matrix(1 0 0 1 247.4731 93.8694)">350</text>
	</g>
  </g>
 
  </marker>
</defs>	
 
 
 <path   marker-start="url(#Rapport)"   d="M300,300h300" transform="rotate(120 300 300)" stroke="red" stroke-width="3px"/>
 <path d="M300,300h300" transform="rotate(40 300 300)" stroke="green" stroke-width="3px"/>
 
 
</svg>

rotation libre svg

XML/XSL et SOAP

Discussions similaires

Partager

Partager