我想通过 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 地理形状添加哈希模式?
最佳答案
当我们知道您刚刚提供的正确 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
关于svg - 如何通过 d3js 实现 svg 模式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28255621/