Wie man SVG-erscheinen ohne Bildlaufleisten in html

Wie kann ich eine SVG angezeigt, zuverlässig und ohne scrollbars in HTML? Etwas, das funktioniert in Firefox und Chrome ist ausreichend.

  • Der grundlegendste Schritt ist, dass
    die SVG scheint, als es die "natürlichen"
    Breite und Höhe des Dokuments.
    Voll ausgebaut. Ohne scroll-Balken.
    firefox in der Regel tut dies. Chrome
    in der Regel nicht (es sei denn, ich benutze die Vorherige Kenntnis der tatsächlichen Breite und Höhe).

  • Fortgeschrittene Schritt ist
    ich gebe die SVG eine beliebige
    Breite (sagen wir mal 400 Pixel), und die SVG
    erscheint skaliert entsprechend, wobei
    es ist das Seitenverhältnis. Wieder, kein scrollen
    bars.

Ich würde es vorziehen, nicht zu haben, um zu wissen, die natürlichen Dimensionen des SVG in die HTML. Ändern der HTML-oder CSS ist am besten, wenn die änderung der SVG (einmal, nicht für jede Größe, die ich will tun, zeigen Sie es) wäre auch in Ordnung.

Ist diese Art der Sache möglich?

Hier einige Beispiel-html, bettet ein svg. 

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

Den <embed> tag unten kann geändert werden zu <object> oder etwas anderes, wenn nötig.

Hier ist ein Beispiel-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>

Update:

Ok, scheint das tool, das ich verwende, ist die Generierung SVGs mit einem Kleinbuchstaben viewbox - Attribut, ist das falsch, aber, und das Attribut name ist eigentlich camelcase viewBox wie Erik schreibt, richtig unten.

Diese kombiniert mit der Breite/Höhe, Entfernung oder änderung Prozentsatz erlaubt mir, mich zu erreichen, beide Teile der Frage.

Vielen Dank an alle!

InformationsquelleAutor idij | 2010-07-29
  1. 2

    Wenn Sie möchten, dass die svg zu füllen die gesamte Breite/Höhe des Bildschirms, versuchen Sie, diese in das html-Dokument:

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

    Wenn Sie wollten, zu füllen, eine kleinere region das Dokument, dann versuchen Sie das entfernen der width-und height-Attribute des referenzierten svg-root-element, und stellen Sie sicher, dass es eine viewBox Attribut. Dann die Größe des Containers (einbetten) entscheiden sollte die Größe richtig, und es sollte keine scollbars.

    InformationsquelleAutor Erik Dahlström
  2. 0

    Versuchen :

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

    dann wird das Bild angepasst, um die Größe des (beachten Sie, dass Sie lieber ).

    Dies funktioniert, da das viewbox-Attribut gefüllt wird.

    • Dies scheint nicht zu funktionieren. Die resultierende Seite zeigt eine stark beschnitten SVG-Bild in firefox und chrome.
    • Die Angabe von Breite und Höhe auf 100% ist das gleiche wie nicht die Angabe dieser Attribute überhaupt.
    InformationsquelleAutor Tangui
Schreibe einen Kommentar