SVG在除Chrome之外的所有浏览器中都呈现模糊状态

我有一个SVG文件，它使用一个模式来制作一个时间表的背景。在谷歌浏览器中，按预期呈现，每条线都没有反锯齿。但是，在Firefox，Safari和Internet Explorer中，它呈现每行都为2像素且半透明的行。SVG在除Chrome之外的所有浏览器中都呈现模糊状态

我试过

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

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

Renderings的图像

VIEW FULLSCREEN见成效

铬（参考）：

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

火狐（与shape-rendering: crispEdges;）：

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

Firefox （带有.5px效果图，经过多次包含svg的。注意，在不同的尺寸比以前的渲染图像）

（不能发布3个链接，但经过imgur.com用这个ID）： JiuswRF。png

对此问题的任何帮助将是大大 apreciated。

谢谢！

来源

2013-11-23 diger44

你试图使用'viewBox'属性与JavaScript动态设置它的价值？ – collapsar

如果你想留在模式，我建议重写所有这些单位绝对或相对单位，或动态切换您的viewBox维度在JavaScript中。

另一种方法是使用过滤器生成一个模式。这清脆显示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

来源

2013-11-24 17:40:37

SVG在除Chrome之外的所有浏览器中都呈现模糊状态

回答

相关问题