目前,我有一个脚本(通过 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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)