Как сгладить края для пути SVG

Может ли кто-нибудь мне помочь? Я пытаюсь понять, как получить хорошие, гладкие края для этого пути SVG (в настоящее время рисуем его с помощью Raphael). Вот макет кода CodePen (вам может потребоваться прокрутить вниз, чтобы увидеть диагональную линию в окне - это немного смещение сверху).Как сгладить края для пути SVG

http://codepen.io/anon/pen/qbxYOg

<DOCTYPE html> 
<body> 
<div style="width:3484px; height:2000px;"> 
    <svg style="width:100%; height:100%;"> 
      <path fill="#fe0000" stroke="#fe0000" d="M606.182,649.872L739.73,670.2349999999999M743.215,670.366C742.902,669.307,741.7900000000001,668.702,740.73,669.015C739.6700000000001,669.33,739.066,670.442,739.38,671.501C739.694,672.5609999999999,740.806,673.165,741.865,672.851C742.925,672.538,743.53,671.425,743.215,670.366ZM594.333,649L463.09799999999996,628.047M459.614,627.881C459.917,628.943,461.02299999999997,629.559,462.085,629.256C463.14799999999997,628.953,463.763,627.845,463.46,626.784C463.156,625.721,462.04999999999995,625.106,460.988,625.409C459.927,625.713,459.311,626.819,459.614,627.881Z" style="transform: scale(.75); fill: red; stroke: red; stroke-width: 4px"></path> 
     </svg> 
    </div> 
</body> 
</html>

В основном проблема в том, что линия выглядит очень неровная, без сглаживания/сглаживания, и мне нужен, чтобы иметь возможность масштабировать этот SVG путь от 100% увеличения до 50% увеличений для интерактивной карты , Масштабирование его делает края выглядят зубчатыми, но я только замечаю эту проблему для линий по диагонали ...

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

Спасибо!

источник

2016-01-24 Jenn

Линия сглажена. Если вы используете экранную лупу или аналогичную программу, вы можете видеть, что это ясно.

Тот факт, что она выглядит немного зазубренный просто фактор цвета линии, контраст с фоном, а угол линии.

Вы вряд ли получите результат (или любой) лучше этого.

Для сравнения, вот пример вашего примера, показывающий разницу между включенным и выключенным сглаживанием.

<svg width="700px" height="700px"> 
 
    <path fill="#fe0000" stroke="#fe0000" d="M606.182,649.872L739.73,670.2349999999999M743.215,670.366C742.902,669.307,741.7900000000001,668.702,740.73,669.015C739.6700000000001,669.33,739.066,670.442,739.38,671.501C739.694,672.5609999999999,740.806,673.165,741.865,672.851C742.925,672.538,743.53,671.425,743.215,670.366ZM594.333,649L463.09799999999996,628.047M459.614,627.881C459.917,628.943,461.02299999999997,629.559,462.085,629.256C463.14799999999997,628.953,463.763,627.845,463.46,626.784C463.156,625.721,462.04999999999995,625.106,460.988,625.409C459.927,625.713,459.311,626.819,459.614,627.881Z" style="fill: red; stroke: red; stroke-width: 4px" transform="translate(0,-50) scale(.75)"></path> 
 
    <path fill="#fe0000" stroke="#fe0000" shape-rendering="crispEdges" d="M606.182,649.872L739.73,670.2349999999999M743.215,670.366C742.902,669.307,741.7900000000001,668.702,740.73,669.015C739.6700000000001,669.33,739.066,670.442,739.38,671.501C739.694,672.5609999999999,740.806,673.165,741.865,672.851C742.925,672.538,743.53,671.425,743.215,670.366ZM594.333,649L463.09799999999996,628.047M459.614,627.881C459.917,628.943,461.02299999999997,629.559,462.085,629.256C463.14799999999997,628.953,463.763,627.845,463.46,626.784C463.156,625.721,462.04999999999995,625.106,460.988,625.409C459.927,625.713,459.311,626.819,459.614,627.881Z" style="transform: scale(.75); fill: red; stroke: red; stroke-width: 4px"></path> 
 
</svg>

источник

2016-01-24 05:23:07

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

Вот сгенерированный код из Рафаэль, что создает темно-красную сплошную линию, а затем несколько элементов SVG с более толстым инсультом тех же цветов, но более низкой непрозрачностью, чтобы придать ему слегка сглаживать эффект:

<path fill="none" stroke="#fe0000" d="M606.182,649.872C606.182,649.872,739.73,670.2349999999999,739.73,670.2349999999999M743.215,670.366C742.902,669.307,741.7900000000001,668.702,740.73,669.015C739.6700000000001,669.33,739.066,670.442,739.38,671.501C739.694,672.5609999999999,740.806,673.165,741.865,672.851C742.925,672.538,743.53,671.425,743.215,670.366C743.215,670.366,743.215,670.366,743.215,670.366M594.333,649C594.333,649,463.09799999999996,628.047,463.09799999999996,628.047M459.614,627.881C459.917,628.943,461.02299999999997,629.559,462.085,629.256C463.14799999999997,628.953,463.763,627.845,463.46,626.784C463.156,625.721,462.04999999999995,625.106,460.988,625.409C459.927,625.713,459.311,626.819,459.614,627.881C459.614,627.881,459.614,627.881,459.614,627.881" stroke-linejoin="round" stroke-linecap="round" stroke-width="2" opacity="0.3" transform="matrix(1,0,0,1,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-linejoin: round; stroke-linecap: round; opacity: 0.3;"></path> 
<path fill="none" stroke="#fe0000" d="M606.182,649.872C606.182,649.872,739.73,670.2349999999999,739.73,670.2349999999999M743.215,670.366C742.902,669.307,741.7900000000001,668.702,740.73,669.015C739.6700000000001,669.33,739.066,670.442,739.38,671.501C739.694,672.5609999999999,740.806,673.165,741.865,672.851C742.925,672.538,743.53,671.425,743.215,670.366C743.215,670.366,743.215,670.366,743.215,670.366M594.333,649C594.333,649,463.09799999999996,628.047,463.09799999999996,628.047M459.614,627.881C459.917,628.943,461.02299999999997,629.559,462.085,629.256C463.14799999999997,628.953,463.763,627.845,463.46,626.784C463.156,625.721,462.04999999999995,625.106,460.988,625.409C459.927,625.713,459.311,626.819,459.614,627.881C459.614,627.881,459.614,627.881,459.614,627.881" stroke-linejoin="round" stroke-linecap="round" stroke-width="4" opacity="0.3" transform="matrix(1,0,0,1,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-linejoin: round; stroke-linecap: round; opacity: 0.3;"></path> 
<path fill="none" stroke="#fe0000" d="M606.182,649.872C606.182,649.872,739.73,670.2349999999999,739.73,670.2349999999999M743.215,670.366C742.902,669.307,741.7900000000001,668.702,740.73,669.015C739.6700000000001,669.33,739.066,670.442,739.38,671.501C739.694,672.5609999999999,740.806,673.165,741.865,672.851C742.925,672.538,743.53,671.425,743.215,670.366C743.215,670.366,743.215,670.366,743.215,670.366M594.333,649C594.333,649,463.09799999999996,628.047,463.09799999999996,628.047M459.614,627.881C459.917,628.943,461.02299999999997,629.559,462.085,629.256C463.14799999999997,628.953,463.763,627.845,463.46,626.784C463.156,625.721,462.04999999999995,625.106,460.988,625.409C459.927,625.713,459.311,626.819,459.614,627.881C459.614,627.881,459.614,627.881,459.614,627.881" stroke-linejoin="round" stroke-linecap="round" stroke-width="6" opacity="0.3" transform="matrix(1,0,0,1,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-linejoin: round; stroke-linecap: round; opacity: 0.3;"></path> 
<path fill="#fe0000" stroke="#fe0000" d="M606.182,649.872L739.73,670.2349999999999M743.215,670.366C742.902,669.307,741.7900000000001,668.702,740.73,669.015C739.6700000000001,669.33,739.066,670.442,739.38,671.501C739.694,672.5609999999999,740.806,673.165,741.865,672.851C742.925,672.538,743.53,671.425,743.215,670.366ZM594.333,649L463.09799999999996,628.047M459.614,627.881C459.917,628.943,461.02299999999997,629.559,462.085,629.256C463.14799999999997,628.953,463.763,627.845,463.46,626.784C463.156,625.721,462.04999999999995,625.106,460.988,625.409C459.927,625.713,459.311,626.819,459.614,627.881Z" fill-opacity="1" stroke-width="3" opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); fill-opacity: 1; opacity: 1;"></path>

Обратите внимание на настройки ширины и непрозрачности хода для каждого и что координаты все одинаковы.

Я надеюсь, что эта дискуссия поможет кому-то в будущем! Спасибо!

источник

2016-01-25 13:29:18 Jenn

Как сгладить края для пути SVG

ответ

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