html - Create a custom filled Svg column

Question

Does anyone know how to create a SVG depicting a column with a filling of my choice? For example how to create a svg like this without having to create manually all the filling lines?:

Answer 1

您可以创建一个带有红色背景和对角线笔划的 10x10 图像（例如）并重复该图像吗？

称为模式

这里是一个小例子

var paper = Raphael(0, 0, 100, 1000);
var rectangle = paper.rect(0, 0, 100, 1000);
rectangle.attr({
    "fill": "url(your/image.jpg)"
});

http://jsfiddle.net/YhDsD/