1

I'm writing currently a converter tool that creates SVG images, based on information of an other system. The other system allows to create paths with a linear gradient fill.

Source

I'm not an deeply familiar with SVG. I've created a linear gradient as follows:

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    version="1.1" height="1000" width="1000"
    xml:lang="de">

    <defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop stop-color="#32CD32" offset="0%"/>
            <stop stop-color="#32CD32" offset="20%"/>
            <stop stop-color="#FFAD5B" offset="50%"/>     
            <stop stop-color="#32CD32" offset="80%"/>
            <stop stop-color="#32CD32" offset="100%"/>
        </linearGradient>
    </defs>

    <polyline fill="none" points="710,183 628,310 758,395 734,256" stroke="url(#grad1)" stroke-width="20" stroke-linejoin="round" />

</svg>

That results in:

Target

Have somebody an idea how to achieve a gradient color as the source image in SVG?

Thanks a lot for help.

Update, 20th October 2014: I've found a solution now. By using SVG filters, especially Gaussian Blur filter it is possible to solve such an issue.

<defs>
    <filter id="filter_pipe3_2" x="-1" y="-1" width="4" height="4">
        <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
    </filter>
</defs>
<polyline fill="none" stroke="#32cd32" stroke-linejoin="round" stroke-width="20" points="710,183 628,310 758,395 734,256" />
<polyline filter="url(#filter_pipe3_2)" fill="none" stroke="#ffad5b" stroke-linejoin="round" stroke-width="6.66667" points="710,183 628,310 758,395 734,256" />
user3794016
  • 41
  • 4
  • It's not (yet) possible to do this in svg without scripting, here's a scripted example that shows something similar to what you're after: http://owl3d.com/svg/tubefy/articles/images/article3/solid_worm_tubefy.svg – Erik Dahlström Sep 16 '14 at 13:56

0 Answers0