帶梯度的SVG路徑

目前，我有一個腳本（through .py plug-ins in GIMP），可以生成SVG path with a gradient（通過具有不同寬度和顏色的相同路徑的多個路徑來模擬）。帶梯度的SVG路徑

不過，我想知道是否有語法產生，而不需要定義多個路徑類似的東西。

就像定義一個漸變和單個路徑一樣。

我搜索了像svg路徑漸變這樣的關鍵字，到目前爲止我發現的所有漸變都沿着路徑變化，沒有類似於上面顯示的內容，所以我只是想知道如果我沒有使用正確的關鍵字或什麼？或者如果存在這樣的事情。

來源

2017-10-04 Tin Tran

這不是完全不可能的，但你僅限於非常基本的情況下，你必須跳過一些非常複雜的箍。

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>

來源

2017-10-04 21:07:26 ccprog

帶梯度的SVG路徑

回答

相關問題