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

Question

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

我尝试过：

1. 将svg设置为使用shape-rendering =“ crisp-edges”
2. 使用JavaScript和ResizeObserver确定容器何时更改，并将宽度和高度设置为全像素值。这通常可以正常工作，但是会导致布局出现其他问题-我在想因为子元素的宽度/高度确切，它覆盖了flex-basis百分比？
3. 使用JavaScript确定部分像素大小。例如。 1000.47-1000，并使用style =“ height：calc（100％-.47px）”。这在某些情况下可行，但是如果svg的宽度/高度有许多小数位，则将变得不可靠。我猜是因为四舍五入的行为。

我开始认为基于百分比的布局将无法满足我的要求（上述解决方案似乎很棘手），然后转向仅使用绝对/相对定位来确保容器不包含部分像素。

难道没有简单的方法告诉浏览器对基于百分比的flexbox布局使用全像素值吗？

下面是一个示例，尝试按要求更好地解释问题：https://codepen.io/anon/pen/bZXLrj

无论何时：

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

返回非整数值，SVG开始抗锯齿。