Discussion :

[mecmec]

Bonjour,

Tout d'abord, je met ce code "FranceDepartement.svg" ici et ensuite j'explique:

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
<?xml version="1.0" encoding="utf-8"?>
<!-- (c) ammap.com | SVG map of France Departments - High -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
	<defs>
		<style type="text/css">
			.land
			{
				fill: #CCCCCC;
				fill-opacity: 1;
				stroke:white;
				stroke-opacity: 1;
				stroke-width:0.5;
			}
 
            .land { display:none; }
            #FR-02 { display:block !important; }
 
		</style>
 
		<!-- All areas are listed in the line below. You can use this list in your script. -->
		<!--{id:"FR-01"},{id:"FR-02"},{id:"FR-03"},{id:"FR-04"},{id:"FR-05"},{id:"FR-06"},{id:"FR-07"},{id:"FR-08"},{id:"FR-09"},{id:"FR-10"},{id:"FR-11"},{id:"FR-12"},{id:"FR-13"},{id:"FR-14"},{id:"FR-15"},{id:"FR-16"},{id:"FR-17"},{id:"FR-18"},{id:"FR-19"},{id:"FR-2A"},{id:"FR-2B"},{id:"FR-21"},{id:"FR-22"},{id:"FR-23"},{id:"FR-24"},{id:"FR-25"},{id:"FR-26"},{id:"FR-27"},{id:"FR-28"},{id:"FR-29"},{id:"FR-30"},{id:"FR-31"},{id:"FR-32"},{id:"FR-33"},{id:"FR-34"},{id:"FR-35"},{id:"FR-36"},{id:"FR-37"},{id:"FR-38"},{id:"FR-39"},{id:"FR-40"},{id:"FR-41"},{id:"FR-42"},{id:"FR-43"},{id:"FR-44"},{id:"FR-45"},{id:"FR-46"},{id:"FR-47"},{id:"FR-48"},{id:"FR-49"},{id:"FR-50"},{id:"FR-51"},{id:"FR-52"},{id:"FR-53"},{id:"FR-54"},{id:"FR-55"},{id:"FR-56"},{id:"FR-57"},{id:"FR-58"},{id:"FR-59"},{id:"FR-60"},{id:"FR-61"},{id:"FR-62"},{id:"FR-63"},{id:"FR-64"},{id:"FR-65"},{id:"FR-66"},{id:"FR-67"},{id:"FR-68"},{id:"FR-69"},{id:"FR-70"},{id:"FR-71"},{id:"FR-72"},{id:"FR-73"},{id:"FR-74"},{id:"FR-75"},{id:"FR-76"},{id:"FR-77"},{id:"FR-78"},{id:"FR-79"},{id:"FR-80"},{id:"FR-81"},{id:"FR-82"},{id:"FR-83"},{id:"FR-84"},{id:"FR-85"},{id:"FR-86"},{id:"FR-87"},{id:"FR-88"},{id:"FR-89"},{id:"FR-90"},{id:"FR-91"},{id:"FR-92"},{id:"FR-93"},{id:"FR-94"},{id:"FR-95"}-->
 
	</defs>
	<g>
		<path id="FR-01" title="Ain" class="land" d="M413.57,308.03L420.26,287.51L420.66,288.58L422.05,287.74L425.07,289.58L428.33,288.11L429.63,288.39L429.68,287.48L431.26,288.29L432.49,291.15L435.75,291.85L435.75,291.85L436.13,292.92L435.11,293.84L438.34,295.69L437.69,296.41L439.41,298.31L439.45,299.99L440.3,297.75L440.83,299.7L442.42,299.69L441.66,302.15L442.35,302.76L445.06,302.51L446.18,300.96L447.42,300.87L449.38,297.95L449.53,299.18L452.32,300.07L452.8,302.97L458.79,302.74L466.89,293.67L466.89,293.67L471.26,296.62L468.45,301.53L469.38,303.57L463.38,305.63L462.74,306.83L463.99,307.74L462.4,310.65L462.4,310.65L459.76,311.46L459.5,313.45L456.73,312.36L456.14,317.66L457.31,320.15L457.07,322.2L457.07,322.2L454.87,334.91L453.79,336.03L451.82,335.73L451.21,339.82L448.63,341.49L448.63,341.49L447.61,338.82L445.25,336.81L445.67,335.82L440.28,330.09L440.6,328.31L437.33,325.49L435.25,327.61L433.93,330.93L431.99,332.29L430.58,332.06L428.94,330.1L427.5,329.8L427.16,330.58L426.95,329.63L426.95,329.63L419.33,330.26L419.33,328L417.79,324.74L416.4,323.74L414.6,324.73L414.77,323.33L411.5,322.02L412.5,320.21L412.18,313.25L414.51,309.52z"/>
		<path id="FR-02" title="Aisne" class="land" d="M346.84,70.19L350.42,68.84L351.21,70.01L353.35,69.9L354.77,68.56L360.05,69.76L362.25,67.4L364.32,68.08L365.16,69.31L366.24,68.47L367.05,69.02L367.23,67.47L369.34,66.45L370.62,67.56L375.88,68.52L376.51,70.35L380.45,68.11L381,69.26L380.38,71.37L383.77,71.96L384.81,72.94L387.12,72.25L387.12,72.25L389.19,72.83L389.31,73.74L390.82,73.57L390.82,73.57L390.22,76.47L391.8,77.1L391.7,79.39L389.74,85.06L391.56,86.53L388.87,90.25L386.43,91.59L385.96,94.47L382.89,94.17L382.16,95.18L384.42,98.43L383.25,100.11L384.34,100.3L384.48,101.41L382.9,102.54L382.94,105.04L384.03,106.45L382.76,106.91L383.18,108.95L383.18,108.95L382.7,111.88L379.5,110.79L378.01,108.92L375.18,110.61L375,112.86L371.95,112.13L366.44,114.85L367.29,117.69L366.73,118.63L367.81,119.85L366.8,121.24L367.98,122.24L368.67,121.62L369.33,123.52L370.75,123.25L370.72,124.66L368.92,125.71L368.14,124.96L365.48,125.19L364.59,127.14L366.14,129.82L364.01,130.89L363.94,132.36L366.66,131.97L367.78,133.8L366.27,134.43L365.42,136.82L364.14,137.2L364.68,138.29L363.46,138.51L363.32,140.07L361.56,140.23L359.78,144L359.78,144L358.78,144.92L358.14,143.49L355.54,142.76L354.9,139.21L353.3,140.49L352.3,137.93L350.63,138.55L350.08,136.43L346.6,133.92L347.57,131.53L346.02,129.48L346.49,128.46L342.66,127.33L342.66,127.33L343.61,125.69L344.29,126.42L344.05,125.33L345.78,124.58L344.15,124.13L344.51,123.57L344.51,123.57L344.52,123.05L344.52,123.05L343.86,122.21L343.34,124.65L343.16,122.54L339.98,121.06L339.79,122.76L341.17,123.03L340.6,123.93L339.38,122.35L339.06,123.04L338.35,122.59L337.97,120.39L339.77,119.78L340.65,120.99L341.36,120.01L341.28,116.56L339.11,116.45L338.4,113.98L339.73,113.12L341.53,113.88L343.64,110.81L343.58,107.21L346.53,106.78L344.13,105.11L344.83,103.9L343.58,102.12L344.91,101.32L345.41,98.19L343.54,95.15L344.4,94.1L343.75,92.97L344.97,92.65L344.66,89.81L344.66,89.81L344.66,89.81L344.66,89.81L344.64,89.63L344.64,89.63L343.81,85.93L342.36,85.67L343.26,83.47L341.95,81.73L343.2,81.09L342.84,78.69L343.32,79.55L344.66,78.38L344.78,75.77L348.12,71.96L346.09,71.49z"/>
 
<!-- les autres départements cachés  - il faut trouver un moyen de placer un département non caché tout en haut à gauche et le ragrandir un petit peu, ça serait parfait -->
	</g>
</svg>

Dés qu'on upload ce fichier svg dans le ftp et qu'on exécute ceci dans le navigateur web par une url, le département "Aisne" est placé en haut à droite, est-ce que c'est possible de le placer tout en haut à gauche?
Est-ce que c'est possible aussi de ragrandir le département "Aisne" (en zoom) ?



Il n'y a pas beaucoup de documentation sur les svg.

Merci, salutations

[tsuji]

En principe premier, ça peut se faire avec un attribute de transform sur la balise g en question.

Code xml :

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

1
2
3
4
<!--
<g>
-->
<g transform="translate(-300, -50)">

Mais, c'est vrai, j'arrive à (-300, -50) par une méthode ad hoc. Comment faire en général, il vous faut regarder de plus près ce qu'on a comme svg concrètement, la construction concrète... Est-ce possible avec le css ? Il mérite d'y regarder aussi, et je n'ai pas fait.

Et puis pour agrandir, ou réduire, l'image svg, on fait la même: seulement cette fois, il s'agit la fonction scale() comme par exemple ceci.

Code xml :

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

<g transform="scale(1.5) translate(-300, -50)">

Voilà quelque élément à considérer, le reste c'est à vous !