Ändern der Größe von SVG in HTML?

112

Also, ich habe eine SVG-Datei in HTML, und eines der Dinge, die ich über das Format gehört habe, ist, dass es nicht alle pixeliert, wenn Sie es vergrößern.Ändern der Größe von SVG in HTML?

Ich weiß, mit einem JPEG oder was auch immer ich könnte es als 50 von 50 Symbol gespeichert haben, dann tatsächlich als ein (eher pixelig) 100 von 100 Miniaturbild (oder 10 von 10) anzeigen, durch manuelle Einstellung der Höhe und Breite im image_src-Tag.

Allerdings scheinen SVG-Dateien mit Objekt/Embed-Tags verwendet zu werden, und die Änderung der Höhe oder Breite von THOSE führt nur dazu, dass mehr Platz für das Bild zugewiesen wird.

Gibt es eine Möglichkeit anzugeben, dass ein SVG-Bild kleiner oder größer angezeigt werden soll, als es tatsächlich im Dateisystem gespeichert ist?

Quelle

2010-06-25 Jenny

125

Öffnen Sie Ihre .svg Datei mit einem Texteditor (es ist nur XML), und suchen Sie nach so etwas wie dies an der Spitze:

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

Erase Höhe und Breite; Die Standardwerte sind 100%, also sollte es sich auf alles erstrecken, was der Container zulässt.

Quelle

2010-06-25 19:15:33 Amadan

+49

Ja, das stimmt, aber Sie müssen auch ein ‚viewBox‘ Attribut (zB viewBox = „0 0 50 50“ in Ihrem 50x50px Beispiel) hinzuzufügen, da sonst der Inhalt nicht richtig skaliert könnte (wird auf den Behälter abhängen Maße). Scour wird dies automatisch für Sie tun, http://www.codedread.com/scour/. –

Hurra! Das hat geholfen! Ich hatte schon Sachen zu 100% in der Datei, stellt sich heraus, aber die Viewbox war der Schlüssel! Danke euch beiden! – Jenny

+12

Falls es für andere nicht offensichtlich ist, wird bei 'viewBox' zwischen Groß- und Kleinschreibung unterschieden. Außerdem sind die ersten beiden Koordinaten die obere linke Ecke, wenn Sie das Bild beschneiden, und die zweiten beiden Koordinaten sind die Breite und Höhe * vor der Skalierung. –

Versuchen Sie diese:

die Set fehlt Sichtbox und in den Höhen- und Breitenwerte der eingestellten Höhe füllen und Höhenattribute im SVG-Tag
dann das Bild skalieren einfach durch Einstellung der Höhe und Breite zu den gewünschten Prozent Werte. Viel Glück.
Sets ein festes Seitenverhältnis mit preserveAspectRatio="X200Y200 meet (zum Beispiel 200 Pixel), aber es ist nicht notwendig,

z.B.

<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">

Quelle

2011-09-16 19:33:45

Sie es durch die Anzeige svg in-Bild-Tag und Größe Bild-Tag heißt

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

Quelle

2012-08-09 05:47:30 Tanveer

Das Problem, das ich bei der Verwendung von denke, ist, dass Sie die Failover-Funktionen des Tags

Ändern der Größe von SVG in HTML?

Antwort

Verwandte Themen