svg - 如何通过 d3js 实现 svg 模式？

Question

我想通过 d3js(有争议的区域)为我的一些 svg map 的多边形添加一个模式。我已经很好地添加了 sr 地理形状，我还看到在原生 svg 中可以使用 svg 模式:

<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <pattern id="Triangle" width="10" height="10" patternUnits="userSpaceOnUse">
            <path fill="black"d="M5,0 10,10 0,10 Z" />
        </pattern>
    </defs>
    <circle cx="60" cy="60" r="50" fill="url(#Triangle)" />
</svg>

但是如何向我的 d3js 地理形状添加哈希模式？

Answer 1

当我们知道您刚刚提供的正确 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)" })

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="hook"></div>

用

要在 svg 组或元素上使用:

g.attr("fill", "url(#hash4_4)" )

概念

往后看，任何对角线都是旋转的垂直散列。垂直散列的基本模式是一个正方形区域，其中一部分是一条垂直线，或多或少地占据水平宽度，例如正方形的 8px 宽度中有 4px 着色。重复这个模式，旋转，你就拥有了。

图案的颜色

更改图案的填充将影响使用此图案的元素。

其他图案

同样，您可以通过在正方形内设计路径来包含更复杂的 svg 模式。例如通过:

pattern.append("path").attr("d", "M5,0 10,10 0,10 Z") 
// small triangle but can be pushed further !

有关 svg 路径的要点，请检查 svg path & commnands 。

Demo fiddle