javascript - 具有特定缩放级别的 chrome 中不会出现 Svg 水平线

Question

我使用 svg 创建了一个条形图。很少有水平标尺基本上是带有黑色笔划的 svg 线。问题如下

• 当缩放为 75% 或 25% 时，水平标尺消失。
• 水平标尺在其他浏览器中不会消失
• 水平标尺在旋转并垂直时不会消失。

观察：

1. 如果初始缩放为 75%，然后您缩小或放大，则出现线条
2. 但是当再次缩放等于或 75% 或 25% 时，线条就会消失

Jsbin 链接

供参考的图片：
以及有问题的图片：

Answer 1

应用外部模式的原因是什么？如果您用以下代码替换水平线声明，则它可以缩小

      <line x1="0" y1="0" x2="100%" y2="0" class="black-line"></line>   
      <line x1="0" y1="20%" x2="100%" y2="20%" class="black-line"></line>   
      <line x1="0" y1="40%" x2="100%" y2="40%" class="black-line"></line>   
      <line x1="0" y1="60%" x2="100%" y2="60%" class="black-line"></line>   
      <line x1="0" y1="80%" x2="100%" y2="80%" class="black-line"></line>   
      <line x1="0" y1="100%" x2="100%" y2="100%" class="black-line"></line>