SVG như biên giới hình ảnh trên màn hình võng mạc

Question

Vui lòng xem xét chúng ta có tập tin SVG đơn giản, chứa mã cho hình chữ nhật tròn mà góc bán kính bằng 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> 

đây như thế nào nó trông giống như trong Chrome:

Bây giờ chúng ta sử dụng hình ảnh này như một giá trị cho border-image tài sản trong CSS:

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

Bây giờ chúng ta hãy xem xét nó trông như thế nào trong các trình duyệt và thiết bị khác nhau: rực rỡ, hình ảnh trải dài trên các ranh giới của phần tử như mong đợi.

Tuy nhiên, khi chúng tôi kết thúc xem trên thiết bị có màn hình võng mạc, chúng tôi có một số vấn đề: SVG dường như được phát triển hai lần. Tất cả những gì chúng ta thấy là một góc rất lớn.

Nếu chúng tôi thay thế SVG đó bằng PNG tương tự, mọi thứ đều ổn. Hãy xem (iOS 5.1 vẽ các bộ phận bên trong của các yếu tố với màu sắc hình ảnh cho một số lý do, tuy nhiên, đây không phải là một chủ đề của câu hỏi này):

Live demo

Câu hỏi đặt ra là : điều này có thể được xử lý không? Có lẽ, tôi đã có một số SVG sai? Hoặc tôi cần phải đặt thẻ meta chế độ xem với một số công cụ phức tạp để dừng border-image khỏi chia tỷ lệ?

Vấn đề là khá quan trọng. Trước hết, SVG đang được phổ biến chủ yếu là do võng mạc. Nó là công cụ để trang trí mọi thứ mà không phải lo lắng chúng sẽ trông giống như crap trên pixel gấp đôi. Thứ hai, cơ chế và cú pháp của thuộc tính border-image khá giống với thuộc tính sở hữu độc quyền -webkit-mask-box-image, sử dụng nó vẫn là cách duy nhất để làm tròn các khối có chứa các trẻ em được định vị hoàn toàn (ví dụ: Google Maps v3 có thể được làm tròn trong Chromes và Safaries chỉ thông qua nó). Và tài sản này rất có giá trị trong phát triển di động với các thành phần web, khi chúng ta cần thiết lập một số đường viền phức tạp cho một phần tử giao diện người dùng. Đáng buồn thay, bởi tài sản này tăng gấp đôi kích thước SVG của nó giống như border-image.

CẬP NHẬT. Dường như vấn đề này có thể được gây ra bởi updated SVG processor được giới thiệu trong iOS 6.0: trên kích thước SVG võng mạc được tính bằng pixel CSS, trong khi tọa độ được tính bằng võng mạc. Có somebugs được theo dõi có vấn đề tương tự với sự cố của tôi.

Answer 1

Với bản cập nhật của bạn về lỗi iOS6, phương pháp này có thể làm việc:

<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

quên hình ảnh mà bạn có thể làm điều này với css đơn giản

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

được hỗ trợ từ iOS 3.2 ...http://caniuse.com/border-radius

Nếu bạn cần một hình ảnh để cho biên giới để có một mô hình, bạn chỉ có thể sử dụng một hình ảnh định dạng web mà không cần minh bạch và sử dụng border-radius trên đó