SVG 图像未与周围元素对齐/像素完美（尤其是动画时不和谐！）

Posted 2023-03-16

【中文标题】SVG 图像未与周围元素对齐/像素完美（尤其是动画时不和谐！）

【英文标题】：SVG images not aligned/pixel perfect with surrounding elements (especially jarring when animating!)

【发布时间】：2019-09-14 00:01:32

【问题描述】：

我正在尝试在条形图中创建动画 3-D 条形。为了避免任何拉伸/纵横比问题，我将每个条分成三部分：（1）条顶部的 SVG，（2）条“动画”的高度灵活 div (3) 栏底部的 SVG。

我面临的问题是，尽管在检查时宽度值似乎是正确的（拉伸到容器的 100%），但它们似乎并没有很好地对齐。下图说明了这个问题，并“有用地”描述了每个条的三个部分。制作动画时，它可能特别明显。 Here is a CodeSandbox with sample code demonstrating this issue.

我在 Chrome、移动版 Chrome 和移动版 Safari 中看到了这个问题。这在 Safari 上并不总是一个问题。我如何正确地使它看起来无缝？我的 SVG 有问题吗？我的尺寸？带有百分比的浮点错误？

【参考方案1】：

IMO，尝试堆叠三个 div 不是最好的方法，但它应该最有效。

您可以通过稍微重写bar-skew-top.svg 来改进顶部的渲染：

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

但如果我是你，我会拥有一个 SVG 并为其元素设置动画。