SVG в качестве border-image на ретине?

1. Возьмём простой SVG со скруглённым квадратом, радиус скругления у которого выставлен на 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>

Вот как это выглядит:



2. Используем получившийся вектор в качестве значения свойства border-image в CSS:

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

3. Смотрим, что получилось в разных браузерах и на разных устройствах: чудесно, картинка расползлась по границам блока, как и ожидалось.

Однако, когда дело доходит до устройств с ретиной, получаем полный отстой — SVG будто стали вдвое больше. Мы видим только один, увеличенный вдвое угол.

Если подменить SVG аналогичным PNG, всё хорошо. В общем, сами взгляните (iOS 5.1 ещё зачем-то закрасил блок внутри цветом картинки, но это не относится к предмету вопроса):



Демонстрация на CSSDeck

4. Вопрос: возможно ли это победить? Может быть, у меня какой-то неправильный SVG? Возможно, нужно как-то хитро настроить viewport в мета-тегах, чтобы подобное масштабирование не происходило?

Проблема довольно важна. Во-первых, SVG обязан своей современной популярностью как раз ретине, так как позволяет украшать элементы, не беспокоясь, что они будут выглядеть безобразно на двойных пикселях.

Во-вторых, работа и синтаксис свойства border-image во многом аналогичны проприетарному свойству -webkit-mask-box-image, который по-прежнему является единственным способом в Вебките обрезать скругленные уголки у блоков с абсолютно позиционированными детьми (например, третьи гуглокарты иначе в Хромах и Сафарях не скруглишь). Кроме того, это свойство бесценно при разработке приложений под iOS/Android с использованием веб-компонента, когда нужно задать хитрый контур какому-то элементу интерфейса. Однако, подобно border-image, на ретинах оно тоже «удваивает» свою SVG.

  • Вопрос задан
  • 3989 просмотров
Пригласить эксперта
Ответы на вопрос 1
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы