Как визуализировать элементы svg с четкими краями, сохраняя при этом сглаживание?

Есть ли способ визуализации элементов svg с четкими краями, сохраняя при этом сглаживание?

Я создаю браузерный инструмент, который работает в современных браузерах.

Игра с атрибутом shape-rendering не дает мне результатов, которые я ищу.

Я хочу, чтобы у моих элементов было приятное сглаживание , чтобы пути выглядели гладкими, как показано ниже с shape-rendering: auto:

enter image description here

Но мне также нужны элементы, которые не требуют сглаживания, например, поле start, чтобы выглядеть четким и четким, например, при визуализации с помощью shape-rendering: crispEdges:

enter image description here

Возможно ли это? Я ищу, чтобы иметь торт и съесть его тоже?

Ответы

Ответ 1

Возможно, вы установили свойство рендеринга формы для элемента root svg.
Вы должны установить свойство рендеринга формы для каждого элемента формы, как это.

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="10" y="10" width="150" height="20" shape-rendering="crispEdges" 
        fill="none" stroke="black"/>
    <path d="M80,30l100,100" shape-rendering="optimizeQuality" 
        stroke="black" stroke-width="5"/>
</svg>

Ответ 2

Если вы хотите, чтобы ваши ящики отображались резкими, без размытия из-за сглаживания и без использования режима crispEdges, убедитесь, что края линий находятся на границах пикселей. Так, например, если ваши строки имеют нечетное число пикселей в ширину, дайте им координаты, которые составляют 0,5 пикселя.

<rect x="10.5" y="10.5" width="150" height="20" 
    stroke-width="1px" fill="none" stroke="black"/>

И на границе, если ширина штриха четная.

<rect x="10" y="10" width="150" height="20" 
    stroke-width="2px" fill="none" stroke="black"/>

Конечно, это действительно работает, только если ваш SVG отображается в 1:1. То есть, он не масштабируется браузером. И только для горизонтальных и вертикальных линий.

Ответ 3

[Я отправляю это как ответ, а не комментарий, потому что хочу опубликовать изображение. В противном случае это комментарий к полезному сообщению @defghi1977. +1 к нему, кстати.]

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="10" y="10" width="150" height="20" shape-rendering="crispEdges" 
          fill="none" stroke="black" />
    <rect x="10" y="50" width="150" height="20" shape-rendering="auto" 
          fill="none" stroke="black" />
    <path d="M40,30l100,100" shape-rendering="crispEdges" 
          stroke="black" stroke-width="5" />
    <path d="M80,30l100,100" shape-rendering="auto" 
          stroke="black" stroke-width="5" />
</svg>

Произведенный

enter image description here

Это было показано Firefox 38.0.5.
В Internet Explorer 11 настройка shape-rendering дает тот же результат с сглаживанием, а не четким.