Comment recadrer le fichier SVG en HTML / CSS
J'ai le fichier HTML suivant (mypage.html). Un SVG fichier
est jointe à l'image.
<!doctype html>
<html>
<body>
<!-- Display legend -->
<div>
<center> <img src="circos-table-image-medium.svg" height=3500; width=3500; /> </center>
</div>
</body>
</html>La page qu'il génère ressemble à ceci:
Avis il y a un grand espace blanc autour du cercle.
Comment puis-je plante dans le code html ou CSS?
source d'informationauteur neversaint | 2016-06-02
Vous devez vous connecter pour publier un commentaire.
Aucune de ces réponses (et similaires multiples/doublons) semble répondre à cela et vous donner un exemple.
Étape par étape: suppression de "remplissage" (espace blanc autour) directement dans le code SVG
Déterminer le "réel" de la taille de votre svg sans rembourrage. Pour moi, c'était le plus facile à faire en utilisant le (Chrome) inspecteur et planant au-dessus de la chemin élément à l'intérieur de l'inspecteur. Vous verrez la largeur et la hauteur affichée à côté de la réelle svg dans votre navigateur.
Maintenant modifier le code svg directement dans votre texte /éditeur de code de son choix. Vous serez en modifiant le code à l'intérieur de l'élément svg tag.
Confus? Simple Exemple étape par Étape
Cet exemple, il est extrêmement simple, et d'utiliser le svg directement ci-dessous à titre de référence. Si vous souhaitez marcher à travers cet exemple précis, juste envelopper tout le code ci-dessous dans des balises HTML
<html> svg code </html>et l'ouvrir dans votre navigateur.+ , Nous allons supposer que vous avez été en mesure de terminer l'étape n ° 1 et de déterminer le "réel" dimensions de votre svg sans rembourrage. Pour cet exemple, les dimensions réelles sont de 40 x 40. Changer le format svg attributs pour en tenir compte.
+ Nos premières dimensions 48 x 48 et la réalité de nos dimensions (sans rembourrage) sont de 40 x 40. La moitié de cette différence est de 4 x 4. Modifier l'attribut viewBox en conséquence, et ajouter notre réelle de la largeur et de la hauteur.
+ Ouverture de notre svg balise doit désormais tenir compte de ces changements.
+ Si le rembourrage autour de votre svg à des montants différents pour le haut /bas et droite /gauche, ce n'est pas un problème. Il suffit de suivre les instructions standard ci-dessus, puis jouer avec les 2 premières valeurs de la viewBox propriété à acquérir une compréhension de la façon dont ces valeurs de décalage de l'image le long des axes x et y.
Je viens d'apprendre tout cela ce soir, en traitant de la même question. Tout à fait ouvert à des suggestions /éditions de quelqu'un de plus compétent sur la manipulation de graphiques vectoriels adaptables que je
Suffit d'utiliser Inkscape.
Je dois d'abord vous recommandons la lecture de David Rebd post sur le réglage des dimensions de l'image SVG via un éditeur de texte (comme Notepad++).
Puis dans Inkscape, cliquez simplement sur l'article et vous pouvez littéralement juste définir les dimensions sans même avoir à vous soucier de la précision de la souris en faisant glisser.
Si la barre d'outils est manquant, cliquez sur le Vue menu, puis Afficher/Masquer et permettre à la Outils de la Barre de Contrôle.
Avant de tenter de corriger avec le code, vous pouvez essayer d'optimiser votre SVGs mise en page. L'espace blanc visible dans l'Inspecteur fait allusion au fait que le SVG n'est pas solidement fixé au plan de travail. Si vous avez Adobe Illustrator disponible ouvrir votre SVG. Vous devriez voir quelque chose de similaire à ceci:
La zone blanche est votre plan de travail, le cercle de votre SVG. Ce que vous voulez faire est de vous assurer que votre SVG est de la même taille que le plan de travail. Ce bouton vous permet de redimensionner votre plan de travail:
Sélectionner, sélectionnez votre carré blanc, repliez les bords de toucher votre cercle et enregistrer votre SVG.
L'autre solution possible à votre fichier SVG peut être qu'il y a un masque d'écrêtage qui s'étend de la taille du graphique SVG. Dans ce cas, vous aurez besoin de supprimer ces masques lorsque cela est possible. Pour dire s'il y a un masque d'écrêtage affectant votre SVG cliquez sur votre cercle. Si l'environnement ne permet pas de toucher les bords de votre cercle lorsque vous avez sélectionné un masque d'écrêtage qui est de pousser votre image limites.
En regardant votre image, cela peut être assez compliqué et si vous n'êtes pas trop familier avec le vecteur d'édition il pourrait être plus rapide et plus facile de passer à un designer.