SVG角度梯度

有沒有辦法在SVG中做'角度漸變'？SVG角度梯度

（我不知道官方稱謂 - 這是你在顏色選擇器看到的那種漸變的，它的角度有所不同。）

SVG似乎只支持線性和徑向漸變，但我我認爲可能有某種方法可以使用變換來模擬我想要的。

謝謝！

來源

2010-03-17 Ken

我想你所描述的許多顏色的徑向漸變。你可以展示你想要創建的圖像嗎？ – SLaks 2010-03-17 20:01:58

角度（圓錐）漸變沒有標準支持。

但請參閱http://wiki.inkscape.org/wiki/index.php/Advanced_Gradients#Conical_gradient瞭解一些近似方法（不包括源代碼）。該鏈接上的示例不起作用。

來源

2010-03-17 20:16:38 kennytm

好找。關於SVG的一個很好的事情是它*是源代碼。就像HTML一樣，如果你能看到它，那麼源代碼就不可能被包含在內。 :-) – Ken 2010-03-17 20:28:35

嗨肯，我不知道它有什麼幫助，除非我有來源。我不能在我的頁面中硬編碼svg路徑來生成漸變。例如我正在尋找填滿圓弧的角度梯度。 – Tintin 2014-06-05 00:07:26

@ken並非總是如此......我似乎有些程序在使用d屬性的單個10kb +路徑中繪製巨大的棉籤......不太容易閱讀，我可能會添加。 – 2017-05-20 23:29:05

http://en.wikipedia.org/wiki/File:Blended_colour_wheel.svg使用一種創新技術來近似它。

來源

2011-04-05 17:07:16

它嵌入一個PNG圖像來顯示漸變圓..它不是一個真正的矢量圖形。只有筆畫完成路徑。 – 2012-09-11 03:26:20

這裏是一個可能的矢量錐形梯度，但只有VML（+ IE）可以做到這一點...：

http://midiwebconcept.free.fr/Demos/degradeconique.htm

來源

2011-07-10 07:23:07 Zepo

在我回答這個類似的問題，我使用了六個線性漸變逼近一個圓錐形的梯度。如果你只需要一個圓的中心/周長的梯度而不是填充，那麼它應該是一個足夠好的近似值。

svg multiple color on circle stroke

來源

2014-06-01 15:47:14

這看起來很棒！但任何建議如何將它推廣到給定外半徑和內半徑的弧？非常感謝！ – Tintin 2014-06-04 15:05:27

當兩個線性梯度相遇時，可以得到不連續的顏色。對齊linearGradients的最安全的地方可能是內半徑的拐角。因爲那兩個漸變結束之間的那個三角形區域將全部是相同的顏色。這是否回答你的問題？ – 2014-06-04 15:42:47

嗨，我需要一個像你一樣的完整弧度的漸變，但我需要它僅在2種顏色之間變化 - 藍色到紫色......但不管我嘗試什麼顏色組合或者我將弧段分成多少段 - 我沒有得到適當的漸變。您可以通過在兩種顏色之間變化的漸變發佈/更新您的答案，例如藍色的聲音！謝謝 – Tintin 2014-06-04 20:30:20

下面是如何使用模式來做到這一點：https://jsfiddle.net/prozoroff/8eodzrke/

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="800" width="800"> 
    <defs> 
     <linearGradient id="Gradient1" gradientTransform="rotate(90)"> 
      <stop offset="0%" stop-color="#ff0000"/> 
      <stop offset="100%" stop-color="#00ff00"/> 
     </linearGradient> 
     <linearGradient id="Gradient2" gradientTransform="rotate(90)"> 
      <stop offset="0%" stop-color="#0000ff"/> 
      <stop offset="100%" stop-color="#00ff00"/> 
     </linearGradient> 
     <pattern id="Pattern" x="0" y="0" width="600" height="600" patternUnits="userSpaceOnUse"> 
      <g transform="rotate(0, 300, 300)"> 
       <rect shape-rendering="crispEdges" x="0" y="0" width="300" height="600" fill="url(#Gradient1)"/> 
       <rect shape-rendering="crispEdges" x="300" y="0" width="300" height="600" fill="url(#Gradient2)"/> 
      </g> 
     </pattern> 
    </defs> 
    <path id='arc5' style="stroke: url(#Pattern);" fill='transparent' stroke-width='60' d='M 364 58 A 250 250 0 1 1 235 58'/> 
</svg>

來源

2017-12-27 12:13:42 prozorov

請添加一些文檔/說明。 – 2017-12-27 12:37:11

回答

相關問題