Эта статья в основном представляет использование атрибутов Viewbox при использовании изображений SVG в HTML5, включая некоторый отзывчивый контент, связанный с дизайном. Друзья, которые нуждаются в этом, могут обратиться к этому , чтобы быстро понять параметры Viewbox
Атрибут Viewbox используется для указания происхождения и размера системы координат изображения пользователя SVG. Весь контент, нарисованный в SVG, выполняется по сравнению с этой системой координат. Поскольку холст SVG бесконечно расширен во всех направлениях, вы даже можете рисовать графику за пределами этой системы координат; Но эта графика, расположенная относительно окна SVG, также может контролироваться положением системы координат пользователя.
Свойство Viewbox использует четыре параметра для указания местоположения происхождения системы координат и ее размера: высота ширины XY. В первоначальном случае эта система координат эквивалентна инициализированной системе координат окна (определяется шириной и высотой изображения SVG), а ее происхождение находится в (0, 0) - то есть в верхнем левом углу SVG.
Изменив значения двух параметров x и y, положение источника может быть скорректировано. Измените значения ширины и высоты, чтобы изменить размер системы координат. Просто используйте атрибут Viewbox, чтобы помочь вам расширить или обрезать холст SVG. Читайте с примером.
ВАЖНО: В этой статье я не буду изменять поведение по умолчанию (масштаб и позиция) ViewBox в окне SVG. Потому что, согласно поведению атрибута по умолчанию, содержимое Viewbox будет включено как можно полностью в окно, а затем помещен в центр. Тем не менее, использование свойства PreserveasPectratio позволяет свободно изменять размер и положение Viewbox, но в этой статье это не необходимая техника, поэтому мы также не объясним это здесь.
Используйте ViewBox для Crop SVG, то есть используйте атрибут ViewBox, чтобы создать SVG художественного направления
Некоторое время назад один из моих клиентов попросил установить SVG -аватар своего веб -сайта на разные размеры в соответствии с различными размерами экрана, так что только на небольшой его части видна на небольшом экране, на большую часть можно увидеть на среднем экране, а затем полное содержание можно увидеть на большом экране. Первая идея, которая пришла мне в голову в то время, заключалась в том, что его требование заключалось в том, чтобы использовать атрибут Viewbox для обрезки изображения SVG, а затем показать определенную часть изображения, которое он хотел видеть на основе разных размеров экрана.
Изменив размер и происхождение системы координат SVG, мы можем обрезать SVG и отобразить часть контента, который мы хотим отобразить в окне.
Посмотрим, как его реализовать.
Предположим, у нас есть это полное изображение SVG следующим образом, и тогда мы хотим обрезать его до размера маленького экрана. Это изображение представляет собой свободный в использовании векторный дом, разработанный Freepik, который лицензирован в соответствии с Creative Commons Attribution 3.0 Unporteed. Для простоты давайте сначала предположим, что изображение - это почти то, что должно быть обрезано для отображения на малых и средних экранах, и полное содержимое, отображаемое на большом экране, как показано ниже.
На картинке слева - полная картина, которую мы обрезаем, используя свойство Viewbox, а изображение справа - это область, которую мы хотим отобразить на маленьком экране.
Теперь обновите SVG, изменив значение свойства Viewbox. Есть некоторые вещи, которые нужно рассмотреть, мы поговорим о них позже. Но сначала нам нужно изменить систему координат, чтобы соответствовать содержанию области прямоугольника виртуальной коробки на рисунке выше. Регулируя источник системы и значения ширины и высоты, мы можем изменить его начальное значение 0 0 800 800.
Но как мы узнаем новые координаты и новые измерения? Дело не в том, чтобы пройти много повторяющихся экспериментов и ошибок.
Есть несколько способов. Поскольку мы уже находимся в графическом редакторе (мой пример использует ИИ), мы можем использовать панель редактора, чтобы получить позицию и размеры элементов.
Я рисую эту пунктирную прямоугольную коробку, в дополнение к представлению того, что я хочу отобразить на маленьком экране, другая причина заключается в том, что мы можем получить положение и размеры прямоугольника и использовать их в качестве значения Viewbox. Используя панель преобразования ИИ (на фото ниже), мы получили необходимые нам значения. Выбирая прямоугольник и щелкнув ссылку преобразования в верхнем правом углу, мы выясняем панель, показанную на рисунке ниже, включая значения x, y, y, ширину и высоты.
Панель преобразования в этом ИИ может использоваться для получения положения и размера выбранного прямоугольника.
Возможно, вы заметили, что вышеуказанное значение не является целым числом, поэтому нам нужно изменить его вручную. На основе вышеуказанной информации мы изменяем значение Viewbox на 0 200 512 512.
Поскольку соотношение сторон нового видового ящика такое же, как и у окна SVG (оба квадрата), содержимое в видобеле будет расширено, и в окне будет отображаться только выбранная область. После изменения значения Viewbox результат, как показано на рисунке:
Недавно обрезанный SVG. Только место, где мы указываем, что свойство Viewbox видно в окне. Синяя граница указывает окно SVG.
На этом этапе есть проблема, которую необходимо решить:
Что, если соотношение сторон обрезанной области (то есть видоболока) является соотношением сторон окна SVG?
В этом случае будет значительный переполнение. Очевидный переполнение, я имею в виду не расширение за пределами границы окна SVG, а переполнение по сравнению с новой системой координат пользователя, определенной ViewBox. На следующем рисунке представлены соответствующие объяснения.
Если соотношение сторон ViewBox отличается от соотношения сторон Viewbox, контент в SVG переполнит систему координат пользователя, и результат может быть таким.
Черная граница представляет новую систему координат пользователя, а синяя граница - это окно SVG.
Черная граница на правильном изображении выше - это область, определенная Viewbox. Согласно поведению по умолчанию Viewbox в окне, он будет центрироваться и увеличиваться как можно больше, чтобы гарантировать, что его содержание включено в окно (синяя граница).
Поскольку CVG Canvas концептуально простирается бесконечно во всех направлениях, вы можете рисовать графику за пределами системы координат пользователя, а содержание будет непосредственно переполняться и перемещаться, как показано на рисунке выше.
Если вы измените соотношение сторон окна SVG (ширина и высота SVG), чтобы они адаптировались к соотношению сторон визитной ящика, вы не увидите переполнение, поскольку увеличение видового ящика адаптировано к окну, как в предыдущем примере.
Однако в некоторых случаях вы не можете или не хотите менять соотношение сторон вообще. Например, если вы используете SVG Sprite в качестве набора изображений для отображения изображений на странице. В большинстве случаев изображение имеет фиксированное соотношение сторон - и вы не хотите менять размер изображения, просто чтобы адаптироваться к содержанию небольшого изображения внутри него. Или, может быть, вы встроили систему значков и хотите, чтобы все значки оставались одинаковым размером одновременно.
Чтобы отключить избыток (например, в окне отображаются некоторые другие значки на спрайте), вы можете использовать <Clippath>, чтобы вырезать избыток. Путь отсечения может быть элементом <cret>, покрывающего всю область просмотра, а затем применять этот элемент к корневому SVG.
Тем не менее, есть еще одна вещь, которую нужно помнить: убедитесь, что свойства x и y y <erte> соответствуют Viewbox, если прямо не будет относительно позиционировано на начало исходной/инициализированной системы, тогда содержание обрезанного SVG также неясно.
CSS -код копировать контент в буфер обмена