Как придать полигону градиентную заливку внутри SVG?

Question

Я использую этот удивительный плагин jQuery - http://benpickles.github.io/peity/

По сути, он отображает мини-графики и диаграммы в svg формат. В этом svg элемент, есть один polygon и один polyline, Мне нужно, чтобы у полигона был градиент вместо сплошного цвета.

Вот необработанный HTML-код перед тем, как плагин преобразует его:

<td class="chartSection">
    <span class="chart">100, 100.67, 102.34, 109.30, 101.20, 99.20, 70.20</span>
</td>

Вот график после конвертации:

<td class="chartSection">
    <span class="chart" style="display: none;">100, 100.67, 102.34, 109.30, 101.20, 99.20, 70.20</span>
    <svg class="peity" height="53" width="200">
        <polygon fill="#c6d9fd" points="0 52 0 4.924519670631284 33.333333333333336 4.6057639524245175 66.66666666666667 3.8112534309240544 100 0.5 133.33333333333334 4.353613906678859 166.66666666666669 5.305123513266238 200 19.102012808783165 200 52"></polygon>
        <polyline fill="transparent" points="0 4.924519670631284 33.333333333333336 4.6057639524245175 66.66666666666667 3.8112534309240544 100 0.5 133.33333333333334 4.353613906678859 166.66666666666669 5.305123513266238 200 19.102012808783165" stroke="#4d89f9" stroke-width="1" stroke-linecap="square"></polyline>
    </svg>
</td>

Что я пробовал:

Я попытался дать fill градиент через CSS, такой как fill: linear-gradient(#FF0000, #00FF71), Хотя, это привело к тому, что заливка была сплошной черной.

ЗДЕСЬ ДЕМО

Answer 1

Используйте SVG-градиент.

Добавьте определение градиента в виде отдельного фрагмента SVG в ваш HTML-файл:

<span class="chart">100, 100.67, 102.34, 109.30, 101.20, 99.20, 70.20</span>

<svg>
    <defs>
        <linearGradient id="grad">
            <stop offset="0" stop-color="red"/>
            <stop offset="1" stop-color="blue"/>
        </linearGradient>
    </defs>
</svg>

Затем обратитесь к нему в вашем CSS:

polygon {
    fill: url(#grad);
}

Демо здесь

Вы можете узнать больше о SVG градиентах здесь:

http://www.w3.org/TR/SVG11/pservers.html