当我们知道你提供的正确的xml语法时,它是直截了当的:)
D3js模式片段
// SVG injection:
var svg = d3.select("#hook").append("svg").attr("id", "d3svg")
.attr("width", 120)
.attr("height", 120);
//Pattern injection
var defs = svg.append("defs")
var pattern = defs.append("pattern")
.attr({ id:"hash4_4", width:"8", height:"8", patternUnits:"userSpaceOnUse", patternTransform:"rotate(-45)"})
.append("rect")
.attr({ width:"4", height:"8", transform:"translate(0,0)", fill:"#88AAEE" });
//Shape design
svg.append("g").attr("id","shape")
.append("circle")
.attr({cx:"60",cy:"60",r:"50", fill:"url(#hash4_4)" })
使用
要在svg组或元素上使用:
g.attr("fill", "url(#hash4_4)" )
概念
向后,任何斜条都是旋转的垂直哈希.垂直散列的基本图案是正方形区域,其中一部分是采用或多或少的水平宽度的垂直线,例如4px,用于正方形的8px宽度.重复这个模式,旋转,你拥有它.
图案的颜色
更改图案的填充将影响使用此图案的元素.
其他模式
类似地,您可以通过设计方形内的路径来包含更复杂的svg模式.通过示例通过:
pattern.append("path").attr("d", "M5,0 10,10 0,10 Z")
// small triangle but can be pushed further !