Как сделать плавную стерку на краях svg?

Question

[MrFrumpuSs]

как сделать плавное стирание у линии на концах как на скрине с помощью svg?

У меня получилось только вот так, но концы не затерты на концах:

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
    <g>
        <path fill="none" stroke="#45678B"  d="M-0.000,83.000 C-0.000,83.000 17.403,22.656 49.000,6.000 C81.878,-11.331 129.000,15.000 129.000,15.000 "/>

    </g>
</g>
</svg>

Answer 1

[Арсений Матыцин]

Просто скопировать из иллюстратора это не пытаться.

А информацию почерпнуть можно тут → css.yoksel.ru/svg-gradients/. В смысле да, это просто градиент в альфа-каналы.

Comments

[MrFrumpuSs]

Спасибо за информацию)

Answer 2

[RAX7]

В твоем случае можно с помощью радиального градиента

а вообще svg не умеет делать заливку градиентом вдоль контуров.

Comments

[RAX7]

origami1024, на скине нет никакого сужения, я вижу просто прозрачные хвосты у контура. Поигравшись с градиентом можно добиться более похожего результата. Ну, а если хочется прям один в один, то проще использовать png с прозрачностью.

[MrFrumpuSs]

RAX7, вот я за эти прозрачные хвосты, а png не подходит, пиксели появляются