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
});
});