1

I have built a bordered and striped oval in CSS, and I would like to do something similar with SVG. I'm completely new to SVG, and I've tried using Raphael. This is as far as I got (see fiddle 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');

How can I do stripes with SVG, in a similar vein to the CSS?

Randomblue
  • 112,777
  • 145
  • 353
  • 547

2 Answers2

3

Raphael doesn't appear to support patterns but it does support linear gradients as a value for the fill attribute:

Gradients

“‹angle›-‹colour›[-‹colour›[:‹offset›]]*-‹colour›”, example: “90-#fff-#000” – 90° gradient from white to black or “0-#fff-#f00:20-#000” – 0° gradient from white via red (at 20%) to black.

So using the linear gradient format described in the Raphael documentation, we could create a striped gradient. It would probably make sense to create a function that generates the striped gradient string for you.

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

See: http://jsfiddle.net/p4Qgw/

Matt Esch
  • 22,661
  • 8
  • 53
  • 51
0

You can use the fill attribute or the <filter> elements within your <ellipse> element.

The following link has examples of both of these:

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

The explanation of filters is here:

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

Dan McCreary
  • 411
  • 3
  • 13