Блог

Главная - Вопросы по программированию - SVG изображения не выровнены / идеально сочетаются с окружающими элементами (особенно неприятно при анимации!)

SVG изображения не выровнены / идеально сочетаются с окружающими элементами (особенно неприятно при анимации!)

#css #reactjs #svg #css-animations #styled-components

#css #reactjs #svg #css-анимации #styled-компоненты

Вопрос:

Я пытаюсь создать анимирующие трехмерные полосы в виде гистограммы. Чтобы избежать каких-либо проблем с растягиванием / соотношением сторон, я разбил каждую панель на три части: (1) SVG для верхней части панели, (2) DIV с гибкой высотой для панели «для анимации» и (3) SVG для нижней части панели.

Проблема, с которой я сталкиваюсь, заключается в том, что, несмотря на то, что значения ширины кажутся правильными при проверке (растянуты до 100% контейнера), они, похоже, недостаточно хорошо выровнены. Изображение ниже иллюстрирует проблему и «услужливо» очерчивает три части каждой панели. При анимации это может быть особенно заметно. Вот CodeSandbox с примером кода, демонстрирующим эту проблему.

Я вижу эту проблему в Chrome, мобильном Chrome и мобильном Safari. Это не всегда проблема в Safari. Как мне правильно сделать, чтобы это выглядело бесшовно? Это проблема с моими SVGS? Мои размеры? Ошибка с плавающей запятой в процентах?

введите описание изображения здесь

Ответ №1:

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

Вы можете улучшить рендеринг верхней части, немного переписав bar-skew-top.svg :

 <svg width="150" height="50" viewBox="0 0 150 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g stroke="none" stroke-width="0" fill-rule="evenodd">
    <rect id="bar-skew-top-bar" x="0" y="25" width="150" height="25"/>
    <path id="bar-skew-top-cap" d="M75 50L0 25 75 0l75 25-75 25z"/>
  </g>
</svg>

Но на вашем месте я бы использовал один SVG и анимировал его элементы.