![]() ![]() |
Влад Яковлев
Анатоль Латотин
11 декабря 2009 |
|
![]() |
Задача. | Правильно масштабировать SVG-элементы в браузерах на движке WebKit при масштабировании страницы. |
![]() |
![]() |
![]() |
Ошибки бывают и в браузерах на движке WebKit: при масштабировании страницы Safari и Chrome неправильно изменяет размеры SVG-элементов (Firefox и Opera этой проблемы не имеют). Увидеть это можно на примере (в режиме масштабирования всей страницы, а не только текста).
Код примера:
|
|
Решение проблемы заключается в создании двух элементов и постоянном отслеживании их ширины. Первый элемент, родитель, — это обычный HTML-элемент с фиксированной шириной. Второй, ребенок, — SVG-элемент той же ширины. Коэффициент — отношение ширины HTML-элемента к ширине SVG-элемента. При
При изменении значения коэффициента всем элементам с тегом svg
нужно менять атрибуты:
— ширину и высоту умножать на коэффициент;
— размеры viewBox делить на коэффициент.
Посмотрим, что получилось:
Код примера:
|
|
Скрипт для исправления проблемы:
|
|
© 19952023 Студия Артемия Лебедева
|