webentwicklung-frage-antwort-db.com.de

Wie skaliere ich eine hartnäckige SVG-Datei, die in das <object> -Tag eingebettet ist?

Ich habe einige SVG-Dateien, die width und height sowie viewbox wie folgt angeben:

<svg width="576pt" height="432pt" viewBox="0 0 576 432" > ...

aber wie werden sie im browser in einer von mir festgelegten größe angezeigt? Ich möchte sie kleiner haben und habe versucht:

<object width="400" data="image.svg"></object>

aber dann bekomme ich sichtbare scrollbars.

Es funktioniert, wenn ich die SVG-Dateien so ändere, dass stattdessen width und height auf 100% Gesetzt werden, aber ich möchte die Größe im HTML unabhängig davon festlegen, welche Größen im HTML verwendet werden SVG-Datei. Ist das möglich ?

109
Zitrax

Keine der hier gegebenen Antworten hat für mich funktioniert, als ich dies 2009 gefragt habe. Da ich jetzt wieder dasselbe Problem hatte, habe ich festgestellt, dass die Verwendung des Tags <img> Und der Breite zusammen mit einem SVG gut funktioniert.

<img width="400" src="image.svg">
32
Zitrax

Dazu können Sie dem Tag <svg> Die Attribute "preserveAspectRatio" und "viewBox" hinzufügen.

Öffnen Sie die .svg-Datei in einem Editor und suchen Sie das Tag <svg>. Fügen Sie diesem Tag die folgenden Attribute hinzu:

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

Ersetzen Sie {width} und {height} durch einige Standardeinstellungen für die viewBox. Ich habe die Werte aus den Attributen "width" und "height" des SVG-Tags verwendet und es schien zu funktionieren.

Speichern Sie das SVG und es sollte nun wie erwartet skaliert werden.

Ich habe diese Informationen hier gefunden:

https://blueprints.launchpad.net/inkscape/+spec/allow-browser-resizing

159
Jim Keller
<body>

<div>
<object type="image/svg+xml" data="img/logo.svg">
   <img src="img/logo.svg" alt="Browser fail" />
</object>
</div>

img/logo.svg ...

<svg
   width="100%" 
   height="100%"
   viewBox="0 0 640 80"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1" />

Dieses Setup hat bei mir funktioniert.

9
H Titan

Sie können in die eingebettete SVG mit JavaScript erreichen:

var svg = document.getElementsByTagName('object')[0].\
  contentDocument.getElementsByTagName('svg')[0];
svg.removeAttribute('width');
svg.removeAttribute('height');

Da Ihre SVG bereits eine ViewBox hat, sollte Firefox die 576 Pixel breite in der ViewBox auf die 400 Pixel breite in Ihrem Dokument skalieren. Andere SVGs können von einer neuen ViewBox profitieren, die von der angegebenen Breite und Höhe abgeleitet ist (dies sind häufig die gleichen Zahlen). Andere Browser können von anderen SVG-Optimierungen profitieren.

9
joeforker

Ich bin auf ein Problem gestoßen, bei dem iOS auf einem iPad die Größe von SVG-Bildern in einem <object> - Tag nicht korrekt geändert hat.

Der CSS-Stil vergrößert oder verkleinert den Container <object>, Das Bild darin wird jedoch nicht geändert (auf iPad, iOS 7).

Die SVG-Bilder wurden aus Adobe Illustrator exportiert, und es stellte sich heraus, dass die Lösung in dieser Hinsicht die Breite und Höhe ersetzte:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="481.89px" height="294.843px" viewBox="0 0 481.89 294.843" 
enable-background="new 0 0 481.89 294.843"
xml:space="preserve">

mit:

width="100%" height="100%"

Ich musste das Tag <object> Verwenden, da das Tag <img> Derzeit das Einbetten von Bitmap-Bildern in SVGs nicht unterstützt.

7
Andrew Swift
  1. Setzen Sie das fehlende Ansichtsfeld und geben Sie die Werte für Höhe und Breite der eingestellten Attribute height und height im svg-Tag ein

  2. Skalieren Sie dann das Bild einfach durch Einstellen der Höhe und Breite auf die gewünschten Prozent Werte. Viel Glück.

  3. Sie können ein festes Seitenverhältnis mit preserveAspectRatio = "x200Y200 meet" festlegen, dies ist jedoch nicht erforderlich

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">
5
Lorenz Lo Sauer

Verwenden Sie einfach CSS, um die SVG-Größe des Browsers zu ändern! Wie so: <object style="width:30%"> Weitere Informationen finden Sie unter http://www.vlado-do.de/svg_test/ . Ich habe es gerade auch lokal mit einer SVG versucht, deren Breite und Höhe in "pt" angegeben ist. Es funktioniert gut in Firefox.

3
Vlado

Hier ist eine PHP Lösung mit QueryPath basierend auf Jim Kellers Antwort.

Sobald QueryPath geladen ist, übergeben Sie einfach Ihr SVG-Skript an die Funktion.

function scaleableSVG($svg){
    $qp = qp($svg, 'svg');
    $width = $qp->attr('width');
    $height = $qp->attr('height');
    $qp->removeAttr('width')->removeAttr('height');                       
    $qp->attr('preserveAspectRatio', "xMinYMin meet");
    $qp->attr('viewBox', "0 0 $width $height");
    return $qp->html();
}
1
Dieter Gribnitz

Mal sehen Ich musste mein Gedächtnis auf SVG auffrischen, ich habe es diese Jahre nicht viel benutzt.

Nach dem, was ich heute gefunden habe, scheint es, als hätten Objekte ohne Maßeinheiten eine feste Größe (in Pixeln, glaube ich), wenn Sie die Größe angeben. Anscheinend gibt es dann keine Möglichkeit, ihre Größe zu ändern, wenn Sie die SVG-Größe ändern (es ändert nur die Größe des Ansichtsfensters/der Leinwand).

Wie bereits erwähnt, geben Sie die Größe der SVG nicht in Prozent an OR eine viewBox angeben (z. B. viewBox = "0 0 600 500").

Wenn Sie die exportierte SVG-Datei nicht ändern können, haben Sie leider Pech. Welche Bibliothek benutzt du?

1
PhiLho