使用SVG的条纹椭圆 [英] Striped oval using SVG
问题描述
我已经在CSS中创建了一个边框和条纹椭圆形,我想做一些类似于SVG的东西。我完全不熟悉SVG,我试过使用Raphael。这就是我所见(请参阅这里):
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');
如何使用SVG创建条纹,类似于CSS?
How can I do stripes with SVG, in a similar vein to the CSS?
渐变
- [ - [: ]] * - ,例如:
90-#fff-#000 - 从白色到黑色的90°渐变或
0-#fff-#f00:20-#000 0°渐变从白色通过红色(在20%)到
黑色。
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.
Raphael文档,我们可以创建一个条纹渐变。这可能是有意义的创建一个函数生成条纹梯度字符串为您。
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');
查看: http://jsfiddle.net/p4Qgw/
这篇关于使用SVG的条纹椭圆的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!