SVG als border-Bild auf Retina-Bildschirmen

Question

Bitte beachten haben wir einfache SVG-Datei, Code für abgerundetes Rechteck enthält, den Eckenradius gleich 10:

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"> 
    <rect fill="#FACE8D" x="0" y="0" width="100" height="100" rx="10" ry="10" /> 
</svg> 

Hier ist, wie es aussieht wie in Chrome:

Jetzt verwenden wir das Bild als Wert für border-image Eigenschaft in CSS:

.box { 
    @include border-image(url('rounded-rectangle.svg') 10); 
    border-width: 10px; 
    background: #FFF; 
    width: 50px; 
    height: 50px; 
} 

Sehen wir uns nun an, wie es in verschiedenen Browsern und Geräten aussieht: brilliant, das Bild erstreckte sich wie erwartet über die Elementgrenzen hinweg.

Wenn wir jedoch die auf Geräten mit Retina-Bildschirmen sehen, haben wir einen ganzen Haufen Mist: SVG scheint doppelt gewachsen zu sein. Alles, was wir sehen, ist eine riesige Ecke.

Wenn wir das SVG durch ein ähnliches PNG ersetzen, ist alles in Ordnung. Werfen Sie einen Blick (iOS 5.1 die inneren Teile der Elemente mit dem Bild Farbe aus irgendeinem Grund gemalt, dies ist jedoch nicht Gegenstand dieser Frage):

Live demo

Die Frage ist, : Kann das erledigt werden? Vielleicht habe ich ein falsches SVG? Oder muss ich das Viewport-Meta-Tag mit einigen kniffligen Sachen setzen, um border-image von der Skalierung zu stoppen?

Das Problem ist ziemlich wichtig. Vor allem ist SVG vor allem wegen der Netzhaut beliebt. Es ist das Werkzeug, um Dinge zu dekorieren, ohne sich Sorgen zu machen, dass sie auf verdoppelten Pixeln wie Müll aussehen würden.

Zweitens die Mechanik und die Syntax der border-image Eigenschaft ist ganz ähnlich wie die -webkit-mask-box-image geschütztes Eigentum, mit denen nach wie vor die einzige Möglichkeit ist Ecken der Blöcke zu runden, die absolut positioniert Kinder enthalten (zum Beispiel Google Maps v3 kann gerundet werden in Chromes und Safaries nur durch sie). Und diese Eigenschaft ist sehr wertvoll in der mobilen Entwicklung mit Web-Komponenten, wenn wir eine schwierige Kontur auf ein UI-Element setzen müssen. Leider, durch diese Eigenschaft verdoppelt es SVG-Dimensionen wie border-image.

UPDATE. Scheint, dass dieses Problem von updated SVG processor in iOS 6.0 verursacht verursacht werden kann: auf Retina SVG-Dimensionen werden in CSS-Pixel berechnet, während die Koordinaten in Netzhaut berechnet werden. Es gibt somebugs verfolgt, die etwas ähnliches mit meinem Problem haben.

Answer 1

über iOS6 Bugs Ihr Update gegeben, könnte dieser Ansatz funktionieren:

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"> 
    <rect fill="#FACE8D" x="0" y="0" width="100%" height="100%" rx="10%" ry="10%" /> 
</svg> 

Answer 2

Vergessen Sie Bilder, die Sie dies mit einfachen CSS

3,2

.box { 
    border: 10px solid #FACE8D; 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
    background: #FFF; 
    width: 50px; 
    height: 50px; 
} 

Unterstützt seit iOS tun können ...http://caniuse.com/border-radius

Wenn Sie ein Bild, um die Grenze benötigen ein Muster haben, können Sie einfach eine Web-Format Bild verwenden, ohne Transparenz und verwenden border-radius an diesem