l'image svg - zoom et frontières

j'ai le petit fichier svg suivant hébergé à: http://dl.dropbox.com/u/7393/hmap.svg et je suis en train de la faire ressembler à ceci: http://dl.dropbox.com/u/7393/final.png l'image svg - zoom et frontières

Les docs où j'ai obtenu ceci de mentionne que ce changement peut être facilement obtenu en changeant un couple d'étiquettes sur le fichier svg. Cependant j'ai essayé de tout changer et je ne peux toujours pas 1) Zoomer, 2) Recadrer, 3) Rendre les bordures blanches. Est-ce que n'importe qui ici a la familiarité avec svg (xml) le format de fichier d'image pour me diriger dans la bonne direction ici?

Merci.

Source

2010-10-22 relima

Je suis un peu confus quant à ce que vous essayez de faire. Essayez-vous de rendre les deux images identiques ou d'ajouter de l'interactivité au fichier SVG pour prendre en charge le zoom et le recadrage? Si le premier, alors les deux images que vous liez sont déjà identiques dans FF3.6, donc il n'est pas clair que tout travail doit être fait là-bas. – jbeard4

C'est le premier. Je suis surpris par cette découverte. J'ai utilisé du chrome et ils ont l'air différents là-bas. Merci de l'avoir signalé, ça me rendait fou. – relima

Pour effectuer un zoom, modifiez le paramètre de la zone de visualisation. Le fichier en utilise un sur la première et seule balise svg en haut du fichier. La vue que vous utilisez est pour l'image complète viewBox="0 -500 2752.766 2537.631" et vous le placez dans une boîte avec height="476.7276" width="634.26801" pixels. Donc, une ligne de 1 unité de large serait environ 1/5 d'un pixel.

Pour zoomer sur dire l'Europe changez-le pour ... viewBox="1000 -500 1000 1000" ... cela dit essentiellement commencer à l'unité 1000 à partir de la gauche et -500 unités à partir du haut et recadrer à 1000 unités vers la droite et 1000 unités vers le bas.

Les lignes blanches sont stroke-width:0.99986893; unités. pour les faire un pixel entier, vous auriez besoin de zoomer plus près. Vous utilisez à la fois le style en haut du document et les styles en ligne, les styles en ligne remplacent tous les autres styles.

<g class="land fr" id="fr" 
transform="matrix(1.229834,0,0,1.1888568,-278.10861,-149.0924)" 
style="fill-opacity:1;stroke:#ffffff;stroke-width:10; 
     stroke-miterlimit:3.97446823;stroke-dasharray:none;stroke-opacity:1; 
     fill:#00ff00">

Une largeur de trait d'environ 10 devrait travailler pour l'être pleine taille affichée dans un 640 x 480 (la largeur et la hauteur définie dans le premier et le seul tag svg) écran - mais pour ce faire, il doit être fait sur chaque élément

<path d="M 2218.0062,810.62352 C 2217.5173,811.14292 2217.698,811.38357 
     2218.5472,811.34547 C 2218.3665,811.10481 2218.1868,810.86417 
     2218.0062,810.62352" 
id="path2404" 
style="fill-opacity:1;stroke:#ffffff;stroke-width:0.99986994; 
     stroke-miterlimit:3.97446823;stroke-dasharray:none;stroke-opacity:1; 
     fill:#6BAED6">

ou le style doit être supprimé des éléments pour utiliser le style parent.

<path d="M 2218.0062,810.62352 C 2217.5173,811.14292 2217.698,811.38357 
     2218.5472,811.34547 C 2218.3665,811.10481 2218.1868,810.86417 
     2218.0062,810.62352" id="path2404">

Source

2010-10-25 05:37:06 Wayne

l'image svg - zoom et frontières

Répondre

Questions connexes