将d3 html转化为svg,如何通过d3js实现svg模式？

当我们知道你提供的正确的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 !