带有渐变的SVG路径 [英] SVG path with gradient

问题描述

当前，我有一个脚本(通过GIMP中的.py插件)可以生成

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.

我搜索了诸如svg 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仅知道两种类型的渐变:线性渐变和径向渐变.您可以将线性渐变与直线对齐，将径向渐变与圆形或圆弧等轴对齐.

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>

这篇关于带有渐变的SVG路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！