Css SVG在除chrome之外的所有浏览器中呈现模糊

我有一个SVG文件，它使用一个模式来创建时间表的背景。在Google Chrome中，这会按预期进行渲染，每一行都不会被消除锯齿。然而，在Firefox、Safari和InternetExplorer中，它的每一行都是半透明的2px

我尝试的

经过数小时的探索和尝试，我得出以下结论：

这种模糊部分是由svg具有动态宽度这一事实造成的，并且在应用

viewBox

属性时解决了这一问题，但是这会降低所有可伸缩性，从而破坏使用svg的目的

当页面上只有一个svg时，它看起来很正常（或非常接近正常），但是当连续出现多个svg时，每隔一个svg（或有时随机出现），每1px行显示为2px抗锯齿行（看起来很糟糕）

将x和/或y值偏移0.5像素不会改变任何东西，有时会使渲染看起来更糟

添加

形状渲染：crispEdges每行的样式可以a）使行完全消失或没有任何效果，或者b）使2px行中的颜色变暗，但实际上不会使行变为1像素

enable background

属性似乎对

同样，这些问题在Chrome中都没有出现，但在所有其他现代浏览器中都会出现

讨论中的SVG

<svg width="100%" height="500" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="day" width="100%" x="0" height="40" patternUnits="userSpaceOnUse">
      <line x1="0" y1="0" x2="100%" y2="0" style="stroke:#bbb;stroke-width:1" />
      <line x1="0" y1="20" x2="100%" y2="20" style="stroke:#ccc;stroke-width:1" stroke-dasharray="3,3" />
    </pattern>
    <pattern id="hours" width="100%" x="0" height="40" patternUnits="userSpaceOnUse">
      <line x1="0" y1="0" x2="100%" y2="0" style="stroke:#000;stroke-width:1" />
    </pattern>
  </defs>
  <rect x="0" width="5%" height="500" fill="url(#hours)" />
  <rect x="7%" width="17%" height="500" fill="url(#day)" />
  <rect x="26%" width="17%" height="500" fill="url(#day)" />
  <rect x="45%" width="17%" height="500" fill="url(#day)" />
  <rect x="64%" width="17%" height="500" fill="url(#day)" />
  <rect x="83%" width="17%" height="500" fill="url(#day)" />
</svg>

渲染图像

查看全屏以查看效果

铬合金（参考）：

Firefox（使用

形状渲染：CrispEdge；

）：

Firefox（使用.5px渲染，在多次包含svg之后。注意，图像渲染的大小与以前的不同）。

（无法发布3个链接，但在imgur.com之后使用此id）： JiuswRF.png

对这个问题的任何帮助都将非常感激

---

谢谢

如果您想继续使用该模式，我建议您使用绝对或相对单位重写所有这些单位，或者使用JavaScript动态切换您的viewBox维度

另一种方法是使用过滤器生成模式。这在Chrome和Firefox中显示得非常清晰（尽管IE仍然有缺陷）

---

您是否尝试使用

viewBox

属性通过javascript动态设置其值？

<filter id="better" primitiveUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
  <feFlood x="0%" y="0%" width="100%" height="0.2%" flood-color="#B00" result="redline"/>
  <feFlood x="0%" y="3.9%" width="1%" height="0.2%" flood-color="#0B0" result="stroke-dash"/>
  <feFlood x="0%" y="3.9%" width="2%" height="0.2%" flood-color="#FFF" result="stroke-dash2"/>   
  <feComposite operator="over" in="stroke-dash" in2="stroke-dash2" result="full-dash"/>
  <feTile in="full-dash" x="0%" y="3.9%" width="100%" height="0.1%" result="green-stroke"/>
  <feComposite x="0%" y="0%" height="8%" width="100%" operator="over" in="redline" in2="green-stroke" result="one-tile"/>
  <feTile in="one-tile" x="0%" y="0%" height="100%" width="100%"/>
</filter>