梯度

Question

我在CSS中构建了一个带边框和条纹的椭圆，我想用SVG做类似的事情。我是SVG的新手，我尝试过使用Raphael。这是我得到的（见小提琴here）：

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条带？

Answer 1

Raphael似乎不支持模式，但它确实支持线性渐变作为fill属性的值：

梯度

“ - [ - [：]] * - ”，例如：   “90-＃fff-＃000” - 从白色到黑色或90°的90°渐变   “0-＃fff-＃f00：20-＃000” - 0°梯度从白色到红色（20％）到   黑色。

因此，使用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/

Answer 2

您可以使用fill属性或＆lt; filter＆gt;你的＆lt; ellipse＆gt;中的元素元件。

以下链接包含以下两个示例：

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

过滤器的解释如下：

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

使用SVG镶边椭圆形

2 个答案:

梯度