gpt4 book ai didi

css - SVG 图像与周围元素不对齐/像素完美(尤其是动画时不和谐!)

转载 作者:行者123 更新时间:2023-11-28 16:57:21 25 4
gpt4 key购买 nike

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

我面临的问题是,尽管宽度值在检查时看起来是正确的(拉伸(stretch)到容器的 100%),但它们似乎对齐得不够好。下图说明了这个问题,并“有帮助地”描绘了每个栏的三个部分。制作动画时,它会特别引人注目。 Here is a CodeSandbox with sample code demonstrating this issue .

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

enter image description here

最佳答案

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

您可以通过稍微重写 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 并为其元素设置动画。

关于css - SVG 图像与周围元素不对齐/像素完美(尤其是动画时不和谐!),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55834291/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com