_{Snap.svg demo之}Element.pattern()

lement.pattern(x, y, width, height)

利用当前元素创建一个<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
});

效果

生成HTML