動態創建SVG路徑內的漸變圖層

我正在使用我的SVG創建動態路徑。我現在想爲我的路徑添加漸變，但我被卡住了。我想的方式，如圖2圖像，而我需要它是那種在圖像1.動態創建SVG路徑內的漸變圖層

Needed_Picture

目前我的梯度沿路徑來

Current_Picture

我梯度和中風定義如下：

<defs> 
     <linearGradient id = "grad1" spreadMethod="reflect"> 
      <stop offset="0%" style="stop-color: lightcoral;" /> 
      <stop offset="50%" style="stop-color: #ffffff;" /> 
      <stop offset="100%" style="stop-color: lightcoral;" /> 
     </linearGradient> 
    </defs> 
</svg>

腳本：

svgPath.setAttribute("stroke", "url(#grad1");` 
svgPath.setAttribute("fill", "none"); 
svgPath.setAttribute("stroke-linejoin", "round");` 
svgPath.setAttribute("stroke-width", "10"); 
});

來源

2017-04-11 Muskan Sethia

如果這就是你的意思，那麼你不能沿着路徑的行程漸變，在轉角處等等。

相反，如果你只是想使它這樣的梯度是垂直方向，那麼你就需要使用x，y1，x2和y2屬性來設置線沿梯度運行。如果您不指定這些屬性，則漸變將按照您的第二張圖像水平取向。

<linearGradient id = "grad1" spreadMethod="reflect" x1="0" y1="0" x2="0" y2="1"> 
    <stop offset="0%" style="stop-color: lightcoral;" /> 
    <stop offset="50%" style="stop-color: #ffffff;" /> 
    <stop offset="100%" style="stop-color: lightcoral;" /> 
</linearGradient>

如果希望有一個「管道」，像梯度效應，則該簡單的方法是不同層的筆畫寬度的多條路徑。

下面是一個簡單的例子來演示。

<svg fill="none"> 
 
    <polyline points="0,125, 150,125 150,25, 300,25" stroke="#666" stroke-width="30"/> 
 
    <polyline points="0,125, 150,125 150,25, 300,25" stroke="#999" stroke-width="24"/> 
 
    <polyline points="0,125, 150,125 150,25, 300,25" stroke="#ccc" stroke-width="16"/> 
 
    <polyline points="0,125, 150,125 150,25, 300,25" stroke="#eee" stroke-width="6"/> 
 
</svg>

來源

2017-04-11 13:01:52

謝謝@保羅勒博。是的，的確，我想要一個類似管道的漸變效果，但不是使用多段線，而是想用一條路徑來完成它。因爲，它是在我的問題中動態使用鼠標創建的，所以我可以在其中創建圖層的任何想法？ –

無論是路徑還是折線都無所謂。所有層的座標都是相同的。唯一的區別是行程厚度。這是假設你可以用一個路徑描邊來繪製你想要的管道。你需要比這更熱門的管道形狀嗎？ –

不會。這樣做可以，但是由於路徑是通過鼠標的移動繪製的，我不知道如何將不同的筆畫寬度合併到另一箇中。 @PaulLeBeau –

動態創建SVG路徑內的漸變圖層

回答

相關問題