使用 SVG 的条纹椭圆答案

【问题标题】：Striped oval using SVG使用 SVG 的条纹椭圆
【发布时间】：2013-01-09 22:07:39
【问题描述】：

我在 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');

如何使用 SVG 制作条纹，类似于 CSS？

【问题讨论】：

标签： css svg raphael

【解决方案1】：

您可以在元素中使用填充属性或元素。

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

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

过滤器的解释在这里：

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

【讨论】：

【解决方案2】：

Raphael 似乎不支持图案，但它确实支持线性渐变作为填充属性的值：

渐变

“‹angle›-‹colour›[-‹colour›[:‹offset›]]*-‹colour›”，例如： “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/

【讨论】：

不幸的是，它至少在 WebKit 上看起来如此错误。本来希望 SVG 做得更好。
在 webkit 中对我来说看起来不错，但在缩放时表现非常糟糕。