Javascript Svg水平线在具有特定缩放级别的chrome中不显示

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

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

意见：

如果初始缩放为75%，然后缩小或放大，则 线条出现

但当缩放再次等于或75%或25%时，线条 消失

供参考的图像：
还有一个问题：

---

应用外部模式的原因是什么？如果用下面的代码替换水平线声明，它将保留下来

      <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> 

您使用的是库还是自定义代码？在任何情况下，一个JSFIDLE演示这个问题将允许在ember中使用更相关的answerscustom svg代码-cli@KirillSlatin我已经添加了jsbin链接是的，我认为这会起作用，但我没有尝试：）你的答案肯定解决了我的问题，但没有回答为什么它不会显示在chrome中！所以请投票：）谢谢：）我认为每个浏览器在呈现xlink时都会遇到麻烦。例如，IE 11根据容器上的大小呈现不同的网宽（不是缩放），并且在缩放为35%不正确时也会隐藏这些线！如果我使用rect而不是line，那么它的渲染效果很好。问题就在线路上。我不是说所有的xlink模板。我说的是水平线顺便说一句，我试过xlink

rect

，但没有表现得更好。在90%和50%上，它没有镀铬的上边框