css - SVG 图像未与周围元素对齐/像素完美(尤其是动画时不和谐!)
问题描述
我正在尝试在条形图中创建动画 3-D 条。为了避免任何拉伸/纵横比问题,我将每个条分成三部分:(1)条顶部的 SVG,(2)条“动画”的高度灵活 div (3) 栏底部的 SVG。
我面临的问题是,尽管在检查时宽度值似乎是正确的(拉伸到容器的 100%),但它们似乎并没有很好地对齐。下图说明了这个问题,并“有用地”描述了每个条的三个部分。制作动画时,它可能特别明显。这是一个 CodeSandbox,其中包含演示此问题的示例代码。
我在 Chrome、移动 Chrome 和移动 Safari 中看到了这个问题。这在 Safari 上并不总是一个问题。我如何正确地使它看起来无缝?我的 SVG 有问题吗?我的尺寸?带有百分比的浮点错误?
解决方案
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 并为其元素设置动画。
推荐阅读
- python - 在 Python 中极快地生成 gamma 变量
- c++ - 我需要在 C++ 中找到两个字符串之间的公共前缀
- chart.js - Chart JS 水平条形图 条形和图表宽度
- mapbox-gl-js - 基于建筑物坐标的 MapBox 3d 建筑物样式
- php - SQL 文本列包含一个日期。如何转换以从文本中获取实际日期?
- python - 如何在 python 中解决这个迭代练习?
- c# - 如何在array.orderby C#上获取随机顺序
- reactjs - 为什么我在 TypeScript 中使用 React Hook 时遇到“......既不是 React 函数组件也不是自定义 React Hook 函数”
- javascript - 为什么在 nodejs 中随处使用 Asynchornus 函数是最佳实践
- python - 在 pandas 中,将散点图添加到折线图