Question

我想通过有争议的区域d3js为我的svg地图的一些多边形添加一个模式。我已经很好地添加了ss地理形状，我也看到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模式片段

＆＃13;

// 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)" })

＆＃13;

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

＆＃13;

使用

在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 !

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

<强> Demo fiddle

如何通过d3js实现svg模式？

1 个答案:

D3js模式片段

使用

概念

图案的颜色

其他模式