Question

我有一个SVG文件，它使用模式来制作计划的背景。在谷歌浏览器中，这会按预期呈现，每行都没有消除锯齿。但是，在Firefox，Safari和Internet Explorer中，它呈现的每行都是2px，是半透明的。

我尝试过什么

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

模糊性部分是由于svg具有动态宽度并且在应用viewBox属性时解决的事实造成的，但是这会失去所有可扩展性，这会破坏使用svg的目的。
当页面上只有一个svg时，它看起来看起来正常（或接近正常），但是当连续多个时，每隔一条（或有时是随机的）会出现，每条1px线显示为2px抗锯齿线（看起来很糟糕）。
将x和/或y值偏移.5像素不会改变任何东西，并且有时会使渲染看起来更糟。
在每行的样式中添加shape-rendering: 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>

渲染图片

查看FULLSCREEN以查看效果

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

如果你想保持模式，我建议用绝对OR相对单位重写所有单位，或者用JavaScript动态切换你的viewBox尺寸。

另一种方法是使用Filters生成模式。这在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

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

1 个答案: