如何通过d3js实现svg模式？ [英] How to implement svg pattern via d3js?

问题描述

我想通过d3js，有争议的区域添加一个模式到我的一些svg地图的多边形。我已经添加了thesr地理形状好，我也看到svg模式是可能的原生svg：

 < svg width =120height = 120viewBox =0 0 120 120xmlns =http://www.w3.org/2000/svgversion =1.1xmlns：xlink =http://www.w3.org/1999/ xlink> < defs> < pattern id =Trianglewidth =10height =10patternUnits =userSpaceOnUse> < path fill =blackd =M5,0 10,10 0,10 Z/> < / pattern> < / defs> < circle cx =60cy =60r =50fill =url（#Triangle）/>< / svg>  

/ div>

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

D3js模式代码片段是非常简单的，当我们知道你刚刚提供的正确的xml语法时：

  // SVG注入：var svg = d3.select pattern.Value（svg）.attr（height，120）; attr（id，d3svg defs）var pattern = svg.append（pattern）.attr（{id：hash4_4，width：8，height：8，patternUnits：userSpaceOnUse，patternTransform： }）.append（rect）.attr（{width：4，height：8，transform：translate（0,0），fill：＃88AAEE}）; // Shape designsvg .append（g）。attr（id，shape）.append（circle）。attr（{cx：60，cy：60，r：50 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）
 //小三角形，但可以进一步推！ 
  

有关svg路径的提示，请检查 svg path& commnands 。

演示小提琴

I would like to add a pattern to some of my svg map's polygons via d3js, the disputed areas. I already add thesr geographic shapes well, I also saw svg patterns are possible in native 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>

But how to add hash patterns to my d3js geographic shapes ?

解决方案

It's straight forward when we know the right xml syntax that you just provided :)

D3js pattern snippet

// 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 = svg.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>

Use

To use on your svg groups or elements:

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

Concept

Going backward, any diagonal strip is a rotated vertical hash. The basic pattern of a vertical hash is a square area, of which a part is a vertical line taking more or less of the horizontal width, by example 4px colored out of 8px width for the square. Repeat this pattern, rotate, and you have it.

Pattern's colors

Changing the pattern's fill will affect the elements using this pattern.

Other patterns

Similarly, you can include more complex svg pattern by designing paths within a square. By example via:

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

For a gist on svg path, check svg path & commnands.

Demo fiddle

这篇关于如何通过d3js实现svg模式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！