1

CSSで境界線と縞模様の楕円形を作成しましたが、SVGと同様のことをしたいと思います。私はSVGにまったく慣れていないので、Raphaelを使ってみました。これは私が得た限りです（ここのフィドルを参照）：

var paper = Raphael(150, 150, 320, 320);
var oval = paper.rect(0, 0, 100, 50, 25);
oval.attr('fill', 'crimson');
oval.attr('stroke', 'transparent');

CSSと同じように、SVGでストライプを作成するにはどうすればよいですか？

4

2 に答える 2

3

Raphaelはパターンをサポートしていないようですが、fill属性の値として線形グラデーションをサポートしています。

グラデーション

「‹角度›-‹色› [-‹色› [：‹オフセット›]] *-‹色›」、例：「90-＃fff-＃000」–白から黒への90°グラデーションまたは「0- ＃fff-＃f00：20-＃000 "–白から赤（20％）、黒への0°のグラデーション。

したがって、Raphaelのドキュメントで説明されている線形グラデーション形式を使用して、縞模様のグラデーションを作成できます。ストライプのグラデーション文字列を生成する関数を作成することはおそらく理にかなっています。

function gradientString(color1, color2, step) {
    var gradient = '0-' + color1,
        stripe = false,
        i;

    for (i = 0; i < 100; i += step) {
        if (stripe) {
            gradient += '-' + color1 + ':' + i + '-' + color2 + ':' + i;
        } else {
            gradient += '-' + color2 + ':' + i + '-' + color1 + ':' + i;
        }

        stripe = !stripe;
    }

    return gradient;
}

var paper = Raphael(150, 150, 320, 320);
var oval = paper.rect(0, 0, 100, 50, 25);
oval.attr('fill', gradientString('white', 'crimson', 2));
oval.attr('stroke', 'crimson');

参照： http： //jsfiddle.net/p4Qgw/

于 2013-01-27T00:23:40.457 に答える
0

<ellipse> 要素内で fill 属性または <filter> 要素を使用できます。

次のリンクには、これらの両方の例があります。

http://srufaculty.sru.edu/david.dailey/svg/newstuff/filtermatrixPattern1.svg

フィルタの説明は次のとおりです。

http://srufaculty.sru.edu/david.dailey/svg/SVGOpen2010/Filters2.htm

于 2013-01-25T21:24:18.937 に答える