8

私は SVG の初心者ですが、いくつかのテクニックを学びたいと思っています。

要するに、このようなものを作成する簡単な方法はありますか?

一般的なスピナー

極グラデーションを作成してからクリッピングすることを考えていました:

極勾配

しかし、極勾配を生成するにはどうすればよいでしょうか?

ネイティブな方法がなくても、単純な線形グラデーションを使用して作成し、直交極座標変換を使用して作成できる可能性があります。そうする方法はありますか？

4

3 に答える 3

12

だから、これは私が開発したソリューションです：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg viewBox="0 0 100 100" version="1.1" onload="makeGradient();">
    <script>
        function makeGradient() {
            var root = document.rootElement, i = 256, cir, a;
            for (; i--;) {
                a = i*Math.PI/128;
                cir = document.createElementNS("http://www.w3.org/2000/svg", "circle");
                cir.setAttribute("cx", 50 - Math.sin(a)*45);
                cir.setAttribute("cy", 50 - Math.cos(a)*45);
                cir.setAttribute("r", "5");
                cir.setAttribute("fill", "rgb(" + i + ", " + i + ", " + i + ")");
                root.appendChild(cir);
            }
        }
    </script>
</svg>

縮小版 (395 バイト):

<?xml version="1.0" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" version="1.1" onload="g(this.namespaceURI,document,Math)"><script>function g(n,d,m,i,c,a,p,z){for(i=256;i--;){a=i*m.PI/128;c=d.createElementNS(n,"circle");for(p in z={cx:10-m.sin(a)*9,cy:10-m.cos(a)*9,r:1,fill:"rgb("+[i,i,i]+")"})c.setAttribute(p,z[p]);d.rootElement.appendChild(c)}}</script></svg>

これは、256 階調のグレーで塗りつぶされた円を作成して作成され (コーダー向けのポルノ文学のように聞こえます!)、便利な場所に配置されています。

半径は調整できます。スピナー全体に 45 を選択し、単一の円に 5 を選択しました。さらに、256 が多すぎる場合は、詳細も調整できます。

for (; i -= 2;) { ...

最適な結果を得るには、2 のべき乗を使用します。または、ステップ数を定義するだけです。

var steps = 100, i = steps;
for (; i--;) {
    a = i*2*Math.PI/steps;
    ...
    cir.setAttribute("fill", "rgb(" + i*255/steps + ", " + ...);
}

ヒントをくれた Erik Dahlström に大きな「ありがとう」と、試みてくれた Michael Mullany に感謝します :)

編集： これは、コードを示すためのフィドルです。

編集 2: これは、曲線セグメントを使用してスピナーを作成する別のフィドルです。セグメントの数とサイズを調整でき、回転するのを見ることもできます。サイズが自動の場合、SVG に 5 ピクセルの下マージンがあり、回転がわずかに中心からずれている理由がわかりません...

于 2013-06-20T14:21:27.543 に答える
2

SVG 1.1 には、これを直接許可するペイントサーバーはありませんが、たとえば、スクリプトを少し使用して実行できます。その方法を解説した記事です。

于 2013-06-18T06:56:37.717 に答える
1

SVG 1.1 (今日のほとんどのエッジ ブラウザで利用可能なもの) では極勾配はサポートされていませんが、SVG 2 でこのような機能を許可する提案があります。乗算ソースとして。しかし、それでは、外部画像を回避しようとすることが全体のポイントであると想定しているため、これは少し無意味です:)

于 2013-06-18T05:48:41.950 に答える