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

Question

我使用svg创建了一个条形图。很少有horiztonal统治者基本上svg线与黑色中风。 问题如下

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

观察：

1. 如果初始缩放是75％，然后缩小或放大，那么 出现行
2. 但当变焦再次等于或等于75％或25％时 消失

Jsbin Link

图片供参考：
和有问题的那个：

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>