SVG viewbox-Höhe-Problem auf ios-Safari

Ich bemerkte eine seltsame Sache, auf ios mit svg. Die svgs scheinen gut zu funktionieren in allen anderen Browsern, aber auf Safari-ipad - /iphone die viewbox hat einige seltsame Raum an der Oberseite und der Unterseite des svg. Hat sonst noch jemand kommen über diese und haben Sie schon in der Lage, es zu beheben? Mit einigen einfachen svg-code, z.B.:

<svg width="100%" viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 points="0,10 20,10 10,0" />
</svg>

Auf dem ipad/iphone, wenn ich einen Rand auf der svg gibt es seltsame Raum oberhalb und unterhalb der svg...??

fiddle Güte sieht normal auf dem desktop, aber wenn man es auf einem ipad etc sehen Sie die Probleme.

http://jsfiddle.net/InVAMPED/hck5gg1a/

Wenn ich eine Höhe per CSS das ziehen Sie alles wieder zusammen, aber ich brauche diese Skala auf die Fensterbreite halten Sie das Seitenverhältnis. Von der weiteren Lektüre dieses sieht aus wie ein bug in webkit-Browsern eine Weile zurück. Ich habe nicht aktualisiert, mein ipad in eine Weile so, ich denke dieses Problem kann behoben wurden, die mit einem browser-update??

InformationsquelleAutor user2541153 | 2014-09-29

12

Das problem ist, dass Sie nur wenn Sie die Breite, nicht die Höhe der SVG-layout-Feld. Die viewBox ist, dann passen in das layout-Feld mit dem Standard - xMidYMid meet Einstellung, die Schuppen, die es nur zu passen, in der mehr eingeschränkt dimension und zentriert es in die andere Richtung.

Firefox und den neuesten Versionen von Chrome (und ich denke, desktop-Safari auch) eine Skalierung von SVG zu entsprechen, das viewBox-Seitenverhältnis wenn Sie verlassen eine dimension, wie Sie auto. Aber, andere Browser gilt eine Standard-Höhe/- Breite, und dann skalieren Sie das Bild passend für:
- IE gilt die 150px Höhe/300px Breite, dass ist der Standard für eingebettete Objekte.
- Safari mobile, muss die Anwendung der alten webkit-Standard von 100vh (die Höhe des browser-Fensters).
Es ist nicht wirklich ein "bug" im Browser, nur eine Funktion, wurde nie eindeutig in den Spezifikationen definiert.

Suche nach Informationen über die "padding-bottom Seitenverhältnis hack" für einen Weg, der den browser dazu zwingt, die Achtung, die ein Seitenverhältnis, während immer noch so dass die Breite zu reagieren.
- Ich habe das Attribut preserveAspectRatio="none" zu meinem svg und setzen Sie Höhe und Breite auf 100% - es ist nun alles gut. Könnte einen Versuch Wert sein.
InformationsquelleAutor AmeliaBR
5

AmeliaBR völlig Recht, ein großes Dankeschön für führende mich in die richtige Richtung!

Hier ist, was google mir gezeigt: Die padding-bottom-hack

Weil Sie einen Prozentwert für padding-bottom bekommt, es ist die Höhe, von der Breite des Elements und nicht die Höhe an sich, die wir nutzen können, erstellen responsive Elemente ohne festgelegte Höhe.

Auf dem SVG-container:
```
.container {
    padding-bottom: 70%; /*this is your height/width ratio*/
    height: 0;
  }
```
Auf dem SVG-element selbst:
```
.container svg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}
```
- Tolle Zusammenfassung der padding-bottom (oder -Spitze) hack. Aber nicht .container müssen position: relative?
InformationsquelleAutor undervers
3

Für mich, die Einstellung der Breite und Höhe auf 100% zu allen svgs war der trick:
```
svg {
    width: 100%;
    height: 100%;
}
```
Fühlt sich viel sauberer als die Polsterung hack.

InformationsquelleAutor alexrogers
0

Dieser arbeitete für mich:
```
.mapContainer svg{
  max-height: 60vw; /* This will depend on the aspect ratio */
}
```
Müssen Sie die max-height (in vw Einheiten), so dass der svg sich in Grenzen. Dann wird es skaliert schön überall. Beachten Sie, dass die max-height werden für verschiedene SVGs, je nach dem Seitenverhältnis.

InformationsquelleAutor peerless

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.