具有渐变的SVG路径

2018-06-25 09:22:10

目前，我有一个脚本（通过GIMP中的.py插件）可以生成具有渐变的SVG路径（通过具有不同宽度和颜色的相同路径的多个路径进行模拟）。

在这里输入图像描述

但是，我想知道是否有语法来产生类似的东西，而不需要定义多个路径。

就像定义一个渐变和单个路径一样。

我搜索了像svg路径渐变这样的关键字，到目前为止我发现的所有渐变都沿着路径变化，与上面显示的内容没有任何差别，所以我只是想知道如果我没有使用正确的关键字或什么？或者如果存在这样的事情。

这不是完全不可能的，但你仅限于非常基本的情况下，你必须跳过一些非常复杂的篮球。

SVG只知道两种类型的梯度：线性和径向。您可以将线性渐变与直线对齐，并使用具有同等轴的圆或弧的径向渐变对齐。

因此，您需要将每条路径切割成单个线段，并且如果需要连接直线，请将线条转换为多边形以提供拐角。

<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/71081.html

上一篇: SVG path with gradient

下一篇: Inkspace: How to have many shapes with exactly the same gradient