Смешивание полупрозрачных линий друг над другом ведет себя по-разному в зависимости от используемой ширины штриха при просмотре в Chrome или Firefox.
Пример :
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" version="1.1">
<path d="M 0 0 L 200 200 L 0 200 L 200 200 L 0 200 L 200 0" fill="none" stroke="#000000" stroke-width="0.80" stroke-opacity="0.75" shape-rendering="geometricPrecision"
</svg>
Линия внизу нарисована три раза друг над другом, поэтому она должна выглядеть темнее при смешивании. С шириной хода <= 0,8 он ведет себя как ожидалось. Ширина> 0,8 меняет все линии на однородные по цвету. Обратите внимание, что поведение также зависит от уровня масштабирования, используемого в браузере.
Проблема, с которой я столкнулся заключается в том, что у меня в приложении много перекрывающихся полупрозрачных строк, и получающееся изображение должно неявно выделять, какие пути использовались чаще других ( Пример в codepen ):
- исправить с
stroke-width="0.8"
- неправильно с
stroke-width="0.81"
Is Есть ли подход для правильного смешивания? shape-rendering действительно имеет влияние, но не решает проблему.