SVG рендеринга размыта во всех браузерах, кроме chrome

Question

У меня есть файл SVG, который использует шаблон, чтобы создать фон графика. В Google Chrome это отображается так, как ожидалось, при этом каждая строка не будет сглаживаться. Однако в Firefox, Safari и Internet Explorer он отображает с каждой строкой 2px, которые являются полупрозрачными.

Что я Пробовал

После многих часов поиска и пробовать различные подходы, я пришел к следующим выводам:

1. размытость отчасти вызвана тем, что SVG имеет динамическая ширина и решается, когда применяется атрибут viewBox, однако это теряет всю масштабируемость, которая поражает цель использования svg.
2. Если на странице есть только один svg, он выглядит нормальным (или достаточно близко к нормальному), однако, когда есть несколько последовательно, каждый другой (или иногда случайный) будет отображаться с каждой строкой 1px, отображаемой как 2px anti-aliased line (выглядит плохо).
3. Смещение значений x и/или y на 0,5 пикселя ничего не меняет и может иногда ухудшать рендеринг.
4. Добавление shape-rendering: crispEdges; к стилю каждой линии может либо а) сделать линии полностью исчезают или просто не оказывают никакого влияния или б) сделать цвета в 2рх линий темнее, но на самом деле не делает линии 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> 

Фотографии Изображения

ВИД ПОЛНОЭКРАННЫЙ ВИДЕТЬ ЭФФЕКТ

Хром (ссылка):

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

Firefox (с shape-rendering: crispEdges;):

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

Firefox (с визуализацией .5px, после нескольких включенных svg. Обратите внимание, изображение оказывается в другом размере, чем предыдущие)

(не может опубликовать 3 ссылки, но использовать этот идентификатор после imgur.com). JiuswRF.png

Любая помощь по этой проблеме была бы очень apreciated.

Спасибо!

Answer 1

Если вы хотите остаться с рисунком, я бы рекомендовал переписать все эти единицы в абсолютных или относительных единицах или динамически переключать размеры вашего вида в 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