Как создать SVG с поддержкой более чем одного соотношения пикселей?

76
3

Я хотел бы создать независимый от разрешения SVG, который использует элемент <image>. Можно ли проверить фактическое соотношение пикселей пользовательского агента? Посмотрите пример:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="640" height="480">
<defs>
<pattern id="test" patternUnits="userSpaceOnUse"
x="0" y="0" width="130" height="100"
viewBox="0 0 130 100" >
<IF PIXEL RATIO = 2>
<image xlink:href="test_2x.png" id="svg_1" height="100" width="130" y="0" x="0"/>
<ELSE>
<image xlink:href="test.png" id="svg_1" height="100" width="130" y="0" x="0"/>
<END IF>
</pattern>
</defs>
<rect id="rectangle" stroke="rgb(29, 29, 255)" fill="url(#test)" x="50" y="47" width="320" height="240" />
</svg>

Я только нашел Switch Element в документации, но, похоже, он не очень полезен, поскольку нет функции отображения сетчатки. Или есть? :)

спросил(а) 2021-01-25T17:48:17+03:00 4 месяца, 3 недели назад
1
Решение
89

Вы можете использовать селекторы CSS для обнаружения дисплеев сетчатки. Используя свойство дисплея, вы можете включать и выключать изображения в зависимости от устройства.

У меня нет устройства для сетчатки Apple под рукой, чтобы проверить, но я думаю, что что- то вроде этого должно работать:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="640" height="480">
<style type="text/css">
@media all {
#test_2x_png {display:none}
}
@media (-webkit-min-device-pixel-ratio: 2) {
#test_png {display:none;}
#test_2x_png {display:inline;}
}
</style>
<defs>
<pattern id="test" patternUnits="userSpaceOnUse"
x="0" y="0" width="130" height="100"
viewBox="0 0 130 100" >
<image xlink:href="test_2x.png" height="100" width="130" y="0" x="0" id="test_2x_png"/>
<image xlink:href="test.png" height="100" width="130" y="0" x="0" id="test_png"/>
</pattern>
</defs>
<rect id="rectangle" stroke="rgb(29, 29, 255)" fill="url(#test)" x="50" y="47" width="320" height="240" />
</svg>

ответил(а) 2021-01-25T17:48:17+03:00 4 месяца, 3 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема