Javascript SVG使用百分比布局避免部分像素宽度和高度

我在复杂的网格布局中有SVG图表。用户可以调整网格大小、添加和删除网格。我目前正在使用flexbox，使用FlexBasis的百分比布局。我发现，由于百分比布局，浏览器将svg元素的大小调整为部分像素宽度和高度。例如，1000.47px。图表SVG已编码，因此看起来清晰。但是，当svg宽度/高度有部分像素时，它们不再清晰，并且会出现抗锯齿

我试过：

将svg设置为使用shape rendering=“crisp edges”

使用JavaScript和ResizeObserver确定容器何时更改，并将宽度和高度设置为全像素值。这基本上是可行的，但会导致布局的其他问题-我认为，因为子元素有一个精确的宽度/高度，它会覆盖flex basis percent

使用JavaScript确定部分像素大小。例如，1000.47-1000并使用style=“高度：计算（100%-.47px）”。这在某些情况下是可行的，但是如果svg的宽度/高度有许多小数位，它就变得不可靠。我猜是因为四舍五入的行为

我开始认为基于百分比的布局无法满足我的要求（上面的解决方案似乎很粗糙），转而使用绝对/相对定位来确保容器没有部分像素

没有简单的方法告诉浏览器使用基于百分比的flexbox布局的完整像素值吗

下面是一个示例，尝试根据要求更好地解释问题：

无论何时：

node.boundingClientRect().height; // or
node.boundingClientRect().width;

---

返回非整数值，SVG将开始消除混叠。

如果不返回非整数值，则无法测试任何潜在的解决方案。就目前的形式而言，这个问题是无法回答的（也许除了与维基百科浏览器呈现引擎页面的链接）。因此，它不太可能对未来的用户和离题用户有用。请加一个例子。可运行、最小、完整且可验证的亚像素渲染取决于浏览器。例如，IE将四舍五入到最接近的整数。谢谢Philipp。我实际上使用的是电子，所以chrome似乎没有使用积分值。如果有一个特定于chrome的解决方案，那就行了。你能确认你在chrome上看到这些SVG模糊吗。如果是，您能检查

chrome://flags/#enable-gpu光栅化

。听起来你可能是怪异行为的受害者。这些SVG对我来说很好（不过bug报告中提到的站点没有）。然而，我已经尝试禁用启用gpu光栅化标志，但我仍然有问题。没有一个标志，就没有办法测试任何潜在的解决方案。就目前的形式而言，这个问题是无法回答的（也许除了与维基百科浏览器呈现引擎页面的链接）。因此，它不太可能对未来的用户和离题用户有用。请加一个例子。可运行、最小、完整且可验证的亚像素渲染取决于浏览器。例如，IE将四舍五入到最接近的整数。谢谢Philipp。我实际上使用的是电子，所以chrome似乎没有使用积分值。如果有一个特定于chrome的解决方案，那就行了。你能确认你在chrome上看到这些SVG模糊吗。如果是，您能检查

chrome://flags/#enable-gpu光栅化

。听起来你可能是怪异行为的受害者。这些SVG对我来说很好（不过bug报告中提到的站点没有）。然而，我已经尝试禁用启用gpu光栅化标志，但我仍然有问题。