Comment faire apparaître SVG sans barres de défilement en html

Comment puis-je faire apparaître un fichier SVG de manière fiable sans barre de défilement en HTML? Quelque chose qui fonctionne à la fois dans Firefox et Chrome est suffisant.Comment faire apparaître SVG sans barres de défilement en html

L'étape la plus fondamentale est que le SVG apparaît comme il est « naturel » largeur et la hauteur dans le document. Entièrement étendu. Sans barres de défilement. firefox le fait généralement. Chrome ne le fait généralement pas (sauf si j'utilise une connaissance préalable de la largeur et la hauteur réelle).
L'étape plus avancée est que je donne le SVG une largeur arbitraire (disons 400 pixels), et le SVG apparaît mis à l'échelle de façon appropriée, tout en préservant son rapport d'aspect. Encore une fois, pas de défilement barres.

Je préférerais ne pas avoir à connaître les dimensions naturelles du SVG dans le HTML. Changer le HTML ou le CSS est le meilleur, mais changer le SVG (une fois, pas pour chaque taille que je veux l'afficher) serait également bien.

Est-ce que ce genre de chose est possible?

Voici un exemple html qui incorpore un svg.

<html> 
    <head><title>SVG Sizing</title></head> 
    <body> 
     <embed type="image/svg+xml" src="test.svg"> 
    </body> 
</html>

Le <embed> balise ci-dessous peut être modifiée pour <objet> ou autre chose si nécessaire.

Voici un exemple test.svg:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg width="1200px" height="297px" version="1.1" viewbox="0 0 1200 297" xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges" stroke-width="1" text-rendering="geometricPrecision"> 
    <text x="300" y="15" textLength="8" font-family="Helvetica" font-size="12" fill="black" text-anchor="middle"> A </text> 
    <text x="900" y="15" textLength="8" font-family="Helvetica" font-size="12" fill="black" text-anchor="middle"> B </text> 
    <line x1="300" y1="22" x2="300" y2="47" stroke="black"/> 
    <line x1="900" y1="22" x2="900" y2="47" stroke="black"/> 
    <text x="587" y="37" textLength="25" font-family="Helvetica" font-size="12" fill="black"> Start </text> 
    <line x1="300" y1="272" x2="300" y2="297" stroke="black"/> 
    <line x1="900" y1="272" x2="900" y2="297" stroke="black"/> 
    <text x="583" y="287" textLength="32" font-family="Helvetica" font-size="12" fill="black"> Finish </text> 
    <line x1="150" y1="284" x2="582" y2="284" stroke="black" stroke-dasharray="2,2"/> 
    <line x1="618" y1="284" x2="1050" y2="284" stroke="black" stroke-dasharray="2,2"/> 
</svg>

Mise à jour:

Ok, semble l'outil que je utilise génère SVGs avec un minuscule viewbox attribut, ceci est cependant incorrect, et Le nom de l'attribut est réellement camelcase viewBox comme Erik écrit correctement ci-dessous. Ceci, combiné à l'élimination de la largeur/hauteur ou au changement de pourcentage, me permet d'atteindre les deux parties de la question.

Merci à tous!

Source

2010-07-29 idij

Si vous voulez que le svg pour remplir toute la largeur/hauteur de l'écran, essayez ceci dans le document html:

<style> 
html, body { margin:0; padding:0 } 
embed { width: 100%; height: 100% } 
</style>

Si vous voulez remplir une région plus petite du document, essayez de retirer la largeur et height sur l'élément racine svg référencé, et assurez-vous qu'il existe un attribut viewBox.Ensuite, la taille du conteneur (embed) devrait décider de la taille correctement, et il ne devrait pas y avoir de scollbars.

Source

2010-07-30 20:38:43

Essayez:

<svg width="100%" height="100%" ...>

alors l'image seront redimensionnées à la taille de la (notez que vous devez plutôt utiliser).

Cela fonctionnera puisque l'attribut viewbox est rempli.

Source

2010-07-29 15:16:14 Tangui

Cela ne semble pas fonctionner. La page résultante montre une image SVG fortement recadrée dans firefox et chrome. – idij

La spécification de la largeur et de la hauteur à 100% équivaut à ne pas spécifier ces attributs. –

Comment faire apparaître SVG sans barres de défilement en html

Répondre

Questions connexes