SVG在除chrome之外的所有浏览器中渲染模糊

Question

我有一个SVG文件，该文件正在使用模式制作日程表的背景。 在Google Chrome浏览器中，这会按预期方式呈现，并且每一行都不会被消除锯齿。 但是，在Firefox，Safari和Internet Explorer中，它以每行2px的半透明线条进行渲染。

我尝试过的

经过数小时的搜索和尝试不同的方法，我得出以下结论：

1. 模糊性部分是由于svg具有动态宽度并在应用viewBox属性时解决了这一事实，但是，这失去了所有可伸缩性，从而破坏了使用svg的目的。
2. 当页面上只有一个svg时，它看起来看起来很正常（或足够接近正常值），但是，当连续有多个svg时，每隔一个（有时是随机的）就会出现，每1px的行显示为2px的反像素别名行（看起来很糟）。
3. 将x和/或y值偏移0.5像素不会更改任何内容，有时会使渲染效果更糟。
4. 添加shape-rendering: crispEdges; 每条线的样式可以： a）使线完全消失或根本没有任何效果，或b）使2px线中的颜色更暗，但实际上不使线1像素。
5. 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>

效果图

查看全屏查看效果

Chrome（参考）：

http://i.imgur.com/BMjFmH6.png

Firefox（带有shape-rendering: crispEdges; ）：

http://i.imgur.com/4cgZjq7.png

Firefox （具有.5px渲染，在包含多个svg之后。注意，渲染的图像大小不同于以前的图像。）

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

在这个问题上的任何帮助将大大 apreciated。

谢谢！

Answer 1

如果您希望保持模式不变，建议您以绝对或相对单位重写所有这些单位，或者在JavaScript中动态切换viewBox尺寸。

另一种方法是使用过滤器生成图案。 这在Chrome和Firefox中清晰显示（尽管IE仍然存在问题）

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

http://codepen.io/mullany/pen/CLsxv