如何通过d3js实现SVG图案？

Question

如何通过d3js实现SVG图案？

4

我想通过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地理形状中？

- Hugolpz

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Hugolpz · Accepted Answer

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

演示 jsfiddle