Ошибка округления SVG

Хром способ округления субпиксельных значений в SVG создает для меня проблему. Есть ли способ исправить эту проблему? Поскольку я использую непрозрачность, я не могу просто добавить темный фон, чтобы удалить белые проблески.Ошибка округления SVG

Вот пример: http://dabblet.com/gist/766f6a238d00bcbb41d4

источник

2014-09-14 Roland Schütz

Вы бы лучше заполнение ошибки против самого хрома - так, чтобы они могли это исправить в fututre версии -i nstead из opennng другой цепи специальных футляров каждого кодирования для сети должна быть в курсе : http://code.google.com/p/chromium/issues/list – jsbueno

@jsbueno Проблемы с субпиксельной рендерингом известны годами, и не только в SVG: http://ejohn.org/blog/sub-pixel -problems-in-css/На самом деле это не ошибка Chrome, это проблема округления. Таким образом, это всегда качество и скорость, и никогда не будет «одного» решения. Я искал ответы, подобные Майклу внизу. –

Когда дело доходит до ** непрозрачности ** Я уверен, что нет никакого способа решить это. Пожалуйста, сообщите мне, если это произойдет, но это вряд ли произойдет. Даже решение Майкла. –

Вы можете создать фильтр, чтобы добавить «затирки» в щель :) Но это хак, который работает за счет увеличения непрозрачности этих пикселей. Он также усилит сглаживание наших других краев. Кроме того, если вы используете непрозрачность в этих градиентах, вам нужно будет отрегулировать эти значения tableValues ниже в диапазоне, который вы хотите (иначе, если ваша заливка составляет 0,4 непрозрачности, тогда ваши таблицы будут выглядеть как «0 .1 .4 .4 .4 «). Если у вас есть переменная непрозрачность в ваших градиентах, вы можете играть с другими типами переносов компонентов, которые лучше сохраняют градиенты непрозрачности.

<svg id="background-svg" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 150 75" > 
    <defs> 
    <linearGradient y2="1" x2="1" y1="0" x1="0" id="triangleGradient"> 
     <stop stop-color="black" offset="0"/> 
     <stop stop-color="blue" offset="1"/> 
    </linearGradient> 

    <filter id="mynameisgrout"> 
     <feComponentTransfer> 
     <feFuncA type="table" tableValues="0 .25 1 1 1"/> 
     </feComponentTransfer> 
    </filter> 
    </defs> 

    <g filter="url(#mynameisgrout)"> 
    <polygon points="0,75 100,75 50,0" fill="url(#triangleGradient)"></polygon> 
    <polygon points="50,0 150,0 100,75" fill="url(#triangleGradient)"></polygon> 
    </g> 
</svg>

источник

2014-09-14 23:26:43

Не идеальный, но очень интересный. Я буду читать некоторые документы завтра об этом. Благодаря! –

http://docs.webplatform.org/wiki/svg/elements/feComponentTransfer –

Я нашел способ лучшего решения сейчас :) –

Опция рендеринга формы SVG позволяет настроить то, что важно для рендеринга. В этом случае shape-rendering = "crispEdges" решает проблему.

См https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering

источник

2014-09-21 23:53:02

Сначала я попробовал рендеринг формы, но он по-прежнему оставил слабую линию на Firefox/WIndows 8, но возможно, я сделал синтаксическую ошибку :) –

Это все еще не идеально, но похоже, что это идеальное решение. Grout вводит другие проблемы, цвета иногда меняются странно. Кроме того, в то время как параметр рендеринга формы создает идеальный результат в Chrome и довольно хороший в Firefox, мне пришлось отключить его для Safari и в IE, кажется, просто не имеет никакого эффекта. Все это более сложно, чем я думал, когда решил использовать SVG. –

Ах. Вы можете исправить проблему цвета, добавив к фильтру элемент color-interpolation-filters = "sRGB". В Safari отключено умолчание по умолчанию. Но да - есть много ошибок и сломанных реализаций, когда вы начинаете использовать более продвинутый SVG. –

Ошибка округления SVG

ответ

Смежные вопросы