SVG 角度渐变答案

【问题标题】：SVG angular gradientSVG 角度渐变
【发布时间】：2011-01-28 18:06:13
【问题描述】：

有没有办法在 SVG 中进行“角度渐变”？

（我不知道官方术语——它是你在颜色选择器中看到的那种渐变，它随角度而变化。）

SVG 似乎只支持线性和径向渐变，但我认为可能有某种方法可以使用变换来模拟我想要的。

谢谢！

【问题讨论】：

我认为您正在描述具有多种颜色的径向渐变。你能展示你正在尝试创建的图像吗？

标签： svg gradient

【解决方案1】：

没有标准支持做角（锥形）渐变。

但请参阅http://wiki.inkscape.org/wiki/index.php/Advanced_Gradients#Conical_gradient 了解一些近似方法（但不包括源代码）。该链接上的示例不起作用。

【讨论】：

很好的发现。 SVG 的一个巧妙之处在于它是源代码。像 HTML 一样，如果你能看到它，源代码是不可能不被包含的。 :-)
嗨，Ken，除非我有来源，否则我不知道它有什么帮助。我不能只是硬编码页面中的 svg 路径来生成渐变。例如我正在寻找填充圆弧上的角度渐变。
@ken 并不总是正确的......我似乎有些程序使用 d 属性在单个 10kb+ 路径中绘制巨大的棉签......不太容易阅读我可以补充。

【解决方案2】：

http://en.wikipedia.org/wiki/File:Blended_colour_wheel.svg 使用一种创新技术来近似它。

【讨论】：

它嵌入了一个 png 图像来显示渐变圆.. 它不是一个真正的矢量图形。只有笔画是用路径完成的。

【解决方案3】：

这里有一个可能的矢量锥形渐变，但只有VML（+IE）可以做到……：

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

【讨论】：

【解决方案4】：

在我对这个类似问题的回答中，我使用了六个线性渐变来近似圆锥渐变。如果您只需要圆的笔触/周长的渐变，而不是填充，那么它应该是一个足够好的近似值。

svg multiple color on circle stroke

【讨论】：

这看起来很棒！但是任何建议我如何将它概括为具有给定外半径和内半径的弧？非常感谢！
您可以在两个线性渐变交汇处获得不连续的颜色。对齐 linearGradients 最安全的地方可能是内半径的拐角。因为那时两个渐变结束处之间的三角形区域将是相同的颜色。这能回答你的问题吗？
嗨，我需要像你一样沿着完整弧线的渐变，但我需要它只在两种颜色之间变化 - 蓝色到紫色......但无论我尝试什么颜色组合或有多少我把我的弧线分成几段——我没有得到适当的渐变。您能否使用仅在 2 种颜色之间变化的渐变来发布/更新您的答案，例如蓝色到紫色！谢谢
给我看一个你想着色的弧形示例——例如，在小提琴中。我会尽我所能。
jsfiddle.net/Cy7ec/1 我想改变“#37bad6”的渐变（从右半边的蓝色开始到右半边的紫色“#905387”）。另请注意，我正在使用 d3 并且正在动态地做所有事情。非常感谢。

【解决方案5】：

这是使用模式的方法：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>

【讨论】：

请添加一些文档/说明。

【解决方案6】：

如果您深入研究this page，您会发现代码在 SVG 中通过将其绘制为一系列 1 度弧线来近似圆锥渐变。

【讨论】：

【解决方案7】：

...10 年后...

CSS 现在支持锥形渐变，尽管在撰写本文时browser support is mixed。

您可以将<clipPath /> 应用到<foreignObject />，其内容使用CSS 锥形渐变来实现所需的效果。

https://codepen.io/eastonium/pen/abOpdEm

【讨论】：

并添加一个指向CSS4 conic-gradient的小链接。

【解决方案8】：

添加一个宽度和高度为 100% 的模式，因此它只是一个重复模式

<div style="width:100px">
    <svg viewBox="0 0 35 35" style="transform: scale(1) rotate(-90deg)">
        <defs>
          <pattern
            id="p1"
            patternUnits="userSpaceOnUse"
            width="100%"
            height="100%"
            patternTransform="rotate(90)"
          >
            <image href="https://blogs.igalia.com/dpino/files/2020/06/conic-gradient.png" width="36" height="36" />
          </pattern>
        </defs>
        <g>
          <circle
            cx="50%"
            cy="50%"
            stroke-width="2"
            r="15.915"
            stroke-dasharray="89, 100"
            stroke="url(#p1)"
            fill="none"
          />
        </g>
      </svg>
  </div>

【讨论】：