如何通过 d3js 实现 svg 模式？

Question

我想通过 d3js 为我的一些 svg 地图的多边形添加图案，有争议的区域。我已经很好地添加了这些地理形状，我还看到 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)" )

概念

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

图案的颜色

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

其他图案

同样，您可以通过在正方形内设计路径来包含更复杂的 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 模式？

How to implement svg pattern via d3js?

svg

d3.js

D3js 模式片段

使用

概念

图案的颜色

其他图案