利用当前元素创建一个<pattern>
元素。为了创建这个图案,你需要指定图案矩阵。
<pattern>
容易让人困惑,但同时也很强大。在SVG中,<pattern>
被用来填充图形,填充的图案可以来自SVG图片,或者位图图片。
SVG图案填充很像我们在photoshop中使用的图案填充,如"tiles"(拼贴)等。
x
字符串或数值。y
字符串或数值。 width
字符串或数值。height
字符串或数值。<pattern>
元素可以通过fill
属性使用。
元素。返回<pattern>
元素。
<svg id="svg" width="250" height="250"></svg> <input id="button" type="button" value="点击改变圈圈的顺序">
var svg = Snap("#svg");
var p = svg.paper.path("M10-5-10,15M15,0,0,15M0-5-20,15").attr({
fill: "none",
stroke: "#beceeb",
strokeWidth: 5
}).pattern(0, 0, 10, 10),
c = svg.paper.circle(120, 120, 100);
c.attr({
// 斜纹图案填充
fill: p
});