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

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

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

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

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

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

это возможно? Я хочу иметь свой торт и съесть его тоже?

3 52
svg html5

3 ответа:

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

<?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>
59

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

19

[я публикую это как ответ, а не комментарий, потому что я хочу опубликовать фотографию. В противном случае, это комментарий к полезный пост от @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 настройка дает тот же результат с сглаживанием и не четким.

7