Почему CSS svg иметь более толстый штрих на правой и нижней сторонах?

Question

Я создал несколько иконок на основе svg для небольшого веб-сайта, над которым я работаю, но у меня проблемы с тем, чтобы обводка выглядела так, как мне хотелось бы. Если вы посмотрите на this jsfiddle , вы увидите мою проблему. Обводка внешнего <rect> составляет 1 пиксель по всему периметру, но по какой-то причине правая и нижняя стороны этого внешнего квадрата кажутся более толстыми, чем верхняя и левая стороны, что-то вроде эффекта тени.

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

Может кто-нибудь сказать мне, что здесь происходит и как это исправить?

Заранее спасибо.

Answer 1

То, с чем вы сталкиваетесь, действительно является случаем удивительного субпиксельного рендеринга. Видите ли, штрихи SVG применяются точно на пути , где они указаны. Пример: если путь проходит от точки (0,0) до (0,5) и ему назначается обводка шириной 1 пиксель, обводка охватывает прямоугольник (-0,5,0), (0,5,0), (0,5,5 ), (-0,5,5). Первый из этих изображений иллюстрирует это:

Ваш прямоугольник нарисован от (0,0) (позиция по умолчанию) до (36,36). Следовательно, штрих размещается таким образом, чтобы он находился точно на между пикселями экрана. Вот почему правый и нижний края выглядят размытыми.

Что случилось с верхним и левым краями? Ну, поскольку вы не определили размер для своего изображения SVG, браузер определил его за вас. По умолчанию начинается с (0,0) (верхний левый угол) и SVG составляет 300x150 пикселей шириной.

Поскольку верхний и левый края контура прямоугольника находятся непосредственно на края изображения, они по-прежнему размыты, но вы не видите части за пределами изображения. Следовательно, линия кажется резкой, но если вы присмотритесь, то заметите, что она не полностью черная, а наполовину прозрачная.

Как это исправить? Есть два варианта. Вариант 1 - разместить прямоугольник angular на половине пикселей:

<rect x="0.5" y="0.5" .../>

Другой вариант - переместить область просмотра вашего изображения так, чтобы изображение в целом было сдвинуто на полпикселя:

<svg viewBox="-0.5 -0.5 37 37">

Обратите внимание, что я установил ширину и высоту области просмотра на 37 пикселей. Это потому, что ваш прямоугольник будет иметь конечный размер 37 пикселей: 36 пикселей для контура, а затем по 0,5 пикселей с каждой стороны, где находится внешняя половина обводки в 1 пиксель.

Для общего обзора масштабирования SVG я предлагаю этот пост на CSS Приколы .