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

利用当前元素创建一个<pattern>元素。为了创建这个图案,你需要指定图案矩阵。

<pattern>容易让人困惑,但同时也很强大。在SVG中,<pattern>被用来填充图形,填充的图案可以来自SVG图片,或者位图图片。

SVG图案填充很像我们在photoshop中使用的图案填充,如"tiles"(拼贴)等。


参数
  • x 字符串或数值。
  • y 字符串或数值。
  • width 字符串或数值。
  • height 字符串或数值。

<pattern>元素可以通过fill属性使用。


返回值

元素。返回<pattern>元素。


使用
<svg id="svg" width="100" height="100"></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(50, 50, 50);

$('#button').on('click',function(){
    c.attr({
    // 斜纹图案填充
    fill: p
    });
});