1. Accueil
  2. Question et réponse
  3. Redimensionnement SVG en html?

Redimensionnement SVG en html?

2010-06-25 7 views
112

Donc, j'ai un fichier SVG en HTML, et l'une des choses que j'ai entendu à propos du format est qu'il n'est pas tout pixélisé lorsque vous zoomez dessus. Je sais avec un jpeg ou tout ce que je pourrais l'avoir stocké comme une icône 50 par 50, puis l'afficher en tant que (plutôt pixélisé) 100 par 100 thumbnail (ou 10 par 10), en réglant manuellement la hauteur et width dans la balise image_src. Cependant, les fichiers SVG semblent être utilisés avec des balises objet/embed, et en changeant la hauteur ou la largeur de THOSE, il y a juste plus d'espace alloué pour l'image.Redimensionnement SVG en html?

Y a-t-il un moyen de spécifier que vous voulez qu'une image SVG soit plus petite ou plus petite qu'elle ne l'est réellement dans le système de fichiers?

Source

2010-06-25 Jenny

Répondre

125

Ouvrez votre fichier .svg avec un éditeur de texte (il est juste XML), et chercher quelque chose comme ça en tête:

<svg ... width="50px" height="50px"...

largeur d'effacement et de la hauteur des attributs; les valeurs par défaut sont 100%, donc il devrait s'étendre à tout ce que le conteneur le permet.

Source

2010-06-25 19:15:33 Amadan

+49

Oui c'est vrai, mais vous devez également ajouter un attribut « viewBox » (par exemple viewBox = « 0 0 50 50 » dans votre 50x50px exemple), sinon le contenu pourrait ne pas échelle correctement (dépend du conteneur dimensions).Scour fera cela pour vous automatiquement, http://www.codedread.com/scour/. –

+0

Hourra! Cela a aidé! J'ai déjà eu des choses à 100% dans le fichier, il s'avère, mais la boîte de vue était la clé! Merci à vous deux! – Jenny

+12

Dans le cas où ce n'est pas évident pour quelqu'un d'autre, 'viewBox' est sensible à la casse. En outre, les deux premières coordonnées sont le coin supérieur gauche si vous recadrez l'image et les deux secondes coordonnées sont la largeur et la hauteur * avant * la mise à l'échelle. –

35

Essayez:

  1. Réglez le manquant viewbox et remplir la hauteur et la largeur de la hauteur de consigne et la hauteur des attributs dans la balise svg

  2. Changez l'échelle de l'image simplement en en réglant la hauteur et la largeur sur le pour cent des valeurs souhaitées. Bonne chance.

  3. Set un rapport d'aspect fixe avec preserveAspectRatio="X200Y200 meet (par exemple 200px), mais il est inutile

par exemple,

<svg 
    xmlns:dc="http://purl.org/dc/elements/1.1/" 
    xmlns:cc="http://creativecommons.org/ns#" 
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" 
    xmlns:svg="http://www.w3.org/2000/svg" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" 
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" 
    width="10%" 
    height="10%" 
    preserveAspectRatio="x200Y200 meet" 
    viewBox="0 0 350 350" 
    id="svg2" 
    version="1.1" 
    inkscape:version="0.48.0 r9654" 
    sodipodi:docname="namesvg.svg">

Source

2011-09-16 19:33:45

15

vous pouvez la redimensionner en affichant svg dans la balise d'image et l'étiquette d'image de taille à savoir

<img width="200px" src="lion.svg"></img>

Source

2012-08-09 05:47:30 Tanveer

+1

Le problème que je pense avec l'aide de est que vous perdez les capacités de basculement de la balise (ce qui pourrait être pertinent pour les utilisateurs d'IE sur la version 8 et ci-dessous). –

6

Modification de la largeur du conteneur fixe aussi plutôt que de changer la largeur et la hauteur du fichier source.

.SvgImage img{ width:80%; }

Cela corrige mon problème de dimensionnement svg re. vous pouvez donner n'importe quel% en fonction de vos besoins.

Source

2015-04-17 20:23:03 user2929588

3

Voici un exemple d'obtenir les limites en utilisant svg.getBox(): https://gist.github.com/john-doherty/2ad94360771902b16f459f590b833d44

A la fin, vous obtenez des numéros que vous pouvez brancher dans le svg pour régler le négatoscope correctement. Ensuite, utilisez n'importe quel CSS sur le div parent et vous avez terminé.

// get all SVG objects in the DOM 
var svgs = document.getElementsByTagName("svg"); 
var svg = svgs[0], 
    box = svg.getBBox(), // <- get the visual boundary required to view all children 
    viewBox = [box.x, box.y, box.width, box.height].join(" "); 

    // set viewable area based on value above 
    svg.setAttribute("viewBox", viewBox);

Source

2017-07-07 01:03:27

Questions connexes

 Questions connexes