SVG path with gradient

2018-06-25 09:22:11

Currently, I have a script (through .py plug-ins in GIMP) that can generate an SVG path with a gradient (emulated by having multiple paths of the same path of varying widths and colors).

在这里输入图像描述

However, I'd like to know if there is a syntax to produce something similar without the need to define multiple paths.

Like just define a gradient and single path.

I have searched keywords like svg path gradient and all i found so far are gradients that changes along the path nothing similar to what's shown above so I am just wondering if i am not looking with the right keywords or what? or if such a thing exists.

It is not completely impossible, but you are restricted to pretty elementary cases and you have to jump through some pretty complicated hoops.

SVG knows only two types of gradients: linear and radial. You can align a linear gradient with a straight line, and a radial gradient with a circle or an arc with equal axis.

So you will need to cut up every path into individual segments and, if you need to connect straight lines, convert lines to polygons to provide for corners.

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="200" >
  <defs>
    <linearGradient id="rainbow">
       <stop stop-color="rgb(255,0,0)"   offset="0.8" />
       <stop stop-color="rgb(255,128,0)" offset="0.825" />
       <stop stop-color="rgb(255,255,0)" offset="0.85" />
       <stop stop-color="rgb(128,255,0)" offset="0.875" />
       <stop stop-color="rgb(0,255,0)"   offset="0.9" />
       <stop stop-color="rgb(0,240,68)"  offset="0.925" />
       <stop stop-color="rgb(0,160,168)" offset="0.95" />
       <stop stop-color="rgb(0,0,255)"   offset="0.975" />
       <stop stop-color="rgb(255,0,255)" offset="1" />
    </linearGradient>
    <radialGradient xlink:href="#rainbow" gradientUnits="userSpaceOnUse" cx="60" cy="100" r="50" fx="60" fy="100" id="rg1" />
    <radialGradient xlink:href="#rainbow" gradientUnits="userSpaceOnUse" cx="140" cy="100" r="50" fx="140" fy="100" id="rg2" />
    <linearGradient xlink:href="#rainbow" gradientUnits="userSpaceOnUse" x1="100" y1="100" x2="100" y2="50" id="lg1" />
    <linearGradient xlink:href="#rainbow" gradientUnits="userSpaceOnUse" x1="100" y1="100" x2="100" y2="150" id="lg2" />
    <linearGradient xlink:href="#rainbow" gradientUnits="userSpaceOnUse" x1="50" y1="100" x2="100" y2="100" id="lg3" />
  </defs>
  <path fill="none" stroke="url(#rg1)" stroke-width="10" d="M 60 55 A 45 45 0 0 0 60 145" />
  <path fill="none" stroke="url(#rg2)" stroke-width="10" d="M 140 55 A 45 45 0 0 1 140 145" />
  <path fill="none" stroke="url(#lg1)" stroke-width="10" d="M 60 55 140 55" />
  <path fill="none" stroke="url(#lg2)" stroke-width="10" d="M 60 145 100 145" />
  <polygon fill="url(#lg3)" points="90 80 100 80 100 150 90 140" />
</svg>

链接地址: http://www.djcxy.com/p/71082.html

上一篇: django压缩器和绝对url路径的聪明

下一篇: 具有渐变的SVG路径