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

Question

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

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

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

Answer 1

IMO, попытка сложить три деления - не лучший подход, но он должен работать в основном.

Вы можете улучшить рендеринг верхней части, немного переписав 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 и оживил бы его элементы.