SVG jako granicy obrazu na ekranach Retina

Question

Proszę rozważyć mamy prosty plik SVG, zawierający kod zaokrąglonego prostokąta którego promień naroża równy 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> 

Oto jak to wygląda w Chrome:

teraz możemy używać tego obrazu jako wartość dla border-image własności w CSS:

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

Zobaczmy teraz, jak to wygląda w różnych przeglądarkach i na różnych urządzeniach: genialny, obraz rozciągnięty zgodnie z oczekiwaniami na granicach elementu.

Jednakże, kiedy zobaczymy te na urządzeniach z ekranami siatkówki, mamy trochę totalnej bzdury: SVG wydaje się być uprawiane dwa razy. Wszystko, co widzimy, to jeden ogromny kąt.

Jeśli zastąpimy SVG podobnym PNG, wszystko jest w porządku. Spójrz (iOS 5.1 malowane części wewnętrznych elementów z kolorem obrazu z jakiegoś powodu, to jednak nie jest przedmiotem tego pytania):

Live demo

Pytanie brzmi : czy można to załatwić? Może, mam złe SVG? Lub muszę ustawić meta-znacznik rzutni z kilkoma trudnymi rzeczami, aby zatrzymać skalowanie od border-image?

Problem jest dość ważny. Przede wszystkim SVG jest popularny głównie z powodu siatkówek. Jest to narzędzie do dekorowania rzeczy bez obawy, że będą wyglądać jak bzdury na podwójnych pikselach.

drugie, mechanika i składnia właściwości border-image jest dość podobna do własności zastrzeżonej w -webkit-mask-box-image, za pomocą którego jest jedynym sposobem, aby zaokrąglić narożniki bloków, które zawierają absolutnie pozycjonowane dzieci (na przykład Google Maps v3 mogą być zaokrąglone w Chromes i Safaries tylko przez niego). Ta własność jest bardzo cenna w rozwoju mobilnym dzięki komponentom sieciowym, gdy musimy ustawić jakiś skomplikowany kontur na elemencie interfejsu użytkownika. Niestety, przez tę właściwość podwaja się jej wymiary SVG, podobnie jak border-image.

AKTUALIZACJA. Wygląda na to, że ten problem może być spowodowany przez updated SVG processor wprowadzony w iOS 6.0: na siatkówce Wymiary SVG są obliczane w pikselach CSS, a współrzędne są obliczane na siatkówce. Są śledzone somebugs, które mają coś podobnego do mojego problemu.

Answer 1

Biorąc pod uwagę aktualizację o błędach iOS6, takie podejście może działać:

<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

Zapomnij obrazów Można to zrobić w prosty css

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

Obsługiwane od iOS 3.2 ...http://caniuse.com/border-radius

Jeśli potrzebujesz obrazu w celu granicy mieć wzór, można po prostu użyć Web Format obrazu bez przejrzystości i użyć border-radius na tym