Comment évoluer un svg tenace embarqué avec le <object>tag ?</object>

Question

J’ai quelques fichiers svg qui spécifie la largeur et de hauteur, mais aussi viewbox comme ceci :

mais comment j’ai décider de les afficher dans le navigateur à une taille ? Je veux que les plus petits et ont essayé :

mais ensuite j’ai des barres de défilement visible.

Cela fonctionne si je changer les fichiers svg pour définir la largeur et la hauteur à « 100 % » au lieu de cela, mais je veux décider la taille dans le code html indépendamment de quelle taille est utilisés dans le fichier svg. Est-ce possible ?

Answer 1

Vous pouvez ajouter des "preserveAspectRatio" et "viewBox" attributs de l' <svg> balise pour accomplir cette tâche.

Ouvert le .svg fichier dans un éditeur de texte et de trouver l' <svg> balise. dans cette balise, ajouter les attributs suivants:

preserveAspectRatio="xMinYMin meet"
viewBox="0 0 {width} {height}"

Remplacer {largeur} {hauteur} avec des valeurs par défaut pour la viewBox. J'ai utilisé les valeurs de la "largeur" et "hauteur" des attributs de la balise SVG et ça semblait fonctionner.

Enregistrer le SVG et il devrait maintenant comme prévu.

J'ai trouvé cette information ici:

https://blueprints.launchpad.net/inkscape/+spec/autoriser le-navigateur-redimensionnement

Answer 2

Aucune des réponses fournies ici a fonctionné pour moi quand j’ai demandé ce retour en 2009. Comme je l’avais maintenant la même question encore une fois, j’ai remarqué qu’en utilisant le `` tag et largeur avec un svg fonctionne très bien.

Answer 3

Vous pouvez joindre dans le svg incorporé à l’aide de JavaScript :

Puisque votre svg dispose déjà d’un viewBox, Firefox devrait évoluer la largeur en 576 pixels viewBox à la largeur de 400 pixels dans votre document. Autres SVG peut-être bénéficier d’un viewBox nouveau dérivé annoncé width et height (ce sont souvent les mêmes numéros). Autres navigateurs pourraient bénéficier de svg différents réglages.

Answer 4

<pre><code></code><p>IMG/logo.svg ...</p><pre><code></code></pre><p>Cette configuration a fonctionné pour moi.</p></pre>

Answer 5

<ol> <li><p>La valeur <strong>missing viewbox</strong> et renseignez la hauteur et la largeur des valeurs de la hauteur et les attributs de hauteur dans la balise svg</p></li> <li><p>S’ajuster la photo simplement en <strong>définissant la largeur et la hauteur</strong> des valeurs de <strong>pourcentage désiré</strong> . Bonne chance.</p></li> <li><p>Vous pouvez définir un format fixe avec preserveAspectRatio = « x200Y200 rencontrer, mais il n’est pas nécessaire</p></li> <p>par exemple</p><pre><code></code></pre></ol>