30

SVGで「角度グラデーション」を実行する方法はありますか？

（正式な用語はわかりません。これは、カラーピッカーに見られる種類のグラデーションで、角度によって異なります。）

SVGは線形グラデーションと放射状グラデーションのみをサポートしているようですが、変換を使用して必要なものをシミュレートする方法があるのではないかと考えています。

ありがとう！

4

8 に答える 8

14

...10年後...

CSSは円錐形のグラデーションをサポートするようになりましたが、これを書いている時点ではブラウザのサポートはまちまちです。

内容がCSS円錐グラデーションを使用するにを適用し<clipPath />て<foreignObject />、目的の効果を実現できます。

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

于 2020-02-24T05:45:58.553 に答える
12

角度（円錐）グラデーションを実行するための標準的なサポートはありません。

ただし、いくつかの近似方法については、 http：//wiki.inkscape.org/wiki/index.php/Advanced_Gradients#Conical_gradientを参照してください（ただし、ソースコードは含まれていません）。そのリンクの例は機能しません。

于 2010-03-17T20:16:38.870 に答える
6

パターンを使用してそれを行う方法は次のとおりです：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-27T12:13:42.830 に答える
4

この同様の質問に対する私の答えでは、円錐のグラデーションを近似するために6つの線形グラデーションを使用しました。塗りつぶしではなく、円のストローク/周囲のグラデーションのみが必要な場合は、十分な近似値である必要があります。

サークルストロークのsvg複数色

于 2014-06-01T15:47:14.980 に答える
1

これが可能なベクトル円錐勾配ですが、VML（+ IE）のみがそれを行うことができます...：

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

于 2011-07-10T07:23:07.357 に答える
1

このページを掘り下げると、一連の1度の円弧として描画することにより、SVGの円錐曲線を近似するコードが見つかります。

于 2018-07-16T19:50:40.963 に答える
1

幅と高さが100％のパターンを追加して、1回の繰り返しパターンにします

<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>

于 2021-12-17T11:43:30.160 に答える
-1

http://en.wikipedia.org/wiki/File:Blended_colour_wheel.svgは、革新的な手法を使用して近似します。

于 2011-04-05T17:07:16.760 に答える