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

回答

相关问题