Html-Seite mit SVG-Datei skaliert nicht von Höhe

Ich möchte SVG mit Hilfe JS verwalten und erstellt einfache HTML-Seite zum Rendern SVG, aber Maßstab von Höhe funktioniert nicht im Browser. Warum?Html-Seite mit SVG-Datei skaliert nicht von Höhe

Wie muss ich Vorlage HTML-Seite für die Skalierung SVG-Datei auf einer ganzen Seite schreiben?

SVGHTML.html

<!DOCTYPE HTML> 
 
<html lang='en'> 
 
<meta http-equiv='X-UA-Compatible' content='IE=10' /> 
 
<head> 
 
</head> 
 
<body style='margin: 0; overflow: hidden; width: 100%; height: 100%'> 
 
<object id='SVG' height = "100%" width = "100%" type='image/svg+xml' data=image.svg></object> 
 
</body> 
 
</html>

image.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
 
<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" 
 
    version="1.1" 
 
    id="svg2" 
 
    width="100%" 
 
    height="100%" 
 
    preserveAspectRatio="xMinYMin meet" 
 
    viewBox="0 0 300 300" 
 
    > 
 
    <metadata 
 
    id="metadata14"> 
 
    <rdf:RDF> 
 
     <cc:Work 
 
     rdf:about=""> 
 
     <dc:format>image/svg+xml</dc:format> 
 
     <dc:type 
 
      rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> 
 
     <dc:title></dc:title> 
 
     </cc:Work> 
 
    </rdf:RDF> 
 
    </metadata> 
 
    <defs 
 
    id="defs12" /> 
 
    <text 
 
    id="text4" 
 
    font-size="24" 
 
    y="50" 
 
    x="25">SVG Circle Element</text> 
 
    <text 
 
    id="text6" 
 
    y="275" 
 
    x="25">Click the circle to change its size.</text> 
 
    <circle 
 
    id="circle8" 
 
    onclick="doCircle(evt)" 
 
    stroke-width="5" 
 
    stroke="green" 
 
    fill="pink" 
 
    r="50" 
 
    cy="150" 
 
    cx="125" /> 
 
</svg>

Quelle

2016-07-27 askeet

fand ich Entscheidung. Cascading Stylesheets CSS 2.1 - 10.5 sagt, dass die prozentuale Höhe in Bezug auf die Höhe des umschließenden Blocks der generierten Box berechnet wird. Wenn die Höhe des umschließenden Blocks nicht explizit angegeben wird (d. H. Es hängt von der Höhe des Inhalts ab) und dieses Element nicht absolut positioniert ist, wird der Wert auf "auto" berechnet. Bei absolut positionierten Elementen, deren umschließender Block auf einem Block-Containerelement basiert, wird der Prozentsatz in Bezug auf die Breite der Füllbox dieses Elements berechnet. Dies ist eine Änderung gegenüber CSS1, bei der die prozentuale Breite immer in Bezug auf die Inhaltsbox des übergeordneten Elements berechnet wurde.

Also muss ich Stil position:absolute in Tag-Objekt mit SVG-Datei verwenden.

Quelle

2016-07-27 15:37:54 askeet

Html-Seite mit SVG-Datei skaliert nicht von Höhe

Antwort

Verwandte Themen