我正在使用D3库。
我想在屏幕中间显示一个图像,用圆形路径(或circle
元素)遮罩。与此jsfiddle中显示的内容类似,但在屏幕中间。
我读到这样的事情可以使用svg的模式来完成。所以这里是我用来将图像附加到模式中的一些D3代码:
var circularNode = vis.selectAll("g.node")
.data(userNode)
.enter().append("svg:g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
;
var defs = circularNode.append("svg:defs");
var pattern = defs.append("svg:pattern")
.attr("id", "User001" )
.attr("patternUnits", "userSpaceOnUse")
.attr("patternTransform", function(d) { return "translate(" + d.x + "," + d.y + ")" + " scale(1,1)"; })
.attr("x", 0)
.attr("y", 0)
.attr("width", 1600)
.attr("height", 1160)
//.attr("viewBox", "-10 -10 16 10")
;
var userImagePath = pattern.append("svg:image")
.attr("x", width/2)
.attr("y", height/2)
.attr("width", 179)
.attr("height", 132)
.attr("xlink:href", "http://www.bittbox.com/wp-content/uploads/2008/04/free_hires_wood_texture_5.jpg")
;
var path = circularNode.append("svg:path")
.attr("d", "M0,0 a16,16 0 1 1 -100,0 16,16 0 1 1 100,0 z")
.attr("fill", function(d){ return "url(#User001)";})
;
问题是屏幕上没有显示任何代码。这是检查页面时产生的svg,也见here:
<svg id="graph" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<g class="node" transform="translate(480,400)">
<defs>
<pattern id="User001" patternUnits="userSpaceOnUse" x="0" y="0" width="1600" height="1160">
<image x="480" y="400" width="179" height="132" xlink:href="http://www.bittbox.com/wp-content/uploads/2008/04/free_hires_wood_texture_5.jpg"></image>
</pattern>
</defs>
<path d="M0,0 a16,16 0 1 1 -100,0 16,16 0 1 1 100,0 z" fill="url(#User001)"></path>
</g>
</svg>
我认为问题可能在于图像的尺寸和位置与图案或路径的关系,但我很难理解svg路径元素如何工作以及如何正确定位,甚至阅读完文档后。
有人可以解释图案,图像和路径/圈子如何协同工作,并解释为什么在这种情况下屏蔽图像不会显示?
这是working example。我只是不明白为什么它不适用于上面显示的D3代码。
答案 0 :(得分:0)
您已为图案中使用的图像声明了错误的宽度和高度。它太小了,所以没有任何表现。将代码更改为:
var userImagePath = pattern.append("svg:image")
.attr("x", width/2)
.attr("y", height/2)
.attr("width", 1600)
.attr("height", 1600)
.attr("xlink:href", "http://www.bittbox.com/wp-content/uploads/2008/04/free_hires_wood_texture_5.jpg")
;
此外,您需要在模式本身上设置patternTransform
,以便完整地翻译和显示图像,就像在工作示例中一样:
var pattern = defs.append("svg:pattern")
.attr("id", "User001" )
.attr("patternUnits", "userSpaceOnUse")
.attr("patternTransform", "translate(480,400)")
.attr("x", 0)
.attr("y", 0)
.attr("width", 1600)
.attr("height", 1160)
;
您似乎已经拥有此代码,但生成的SVG不包含该属性。另请注意,您在此处以及在非工作jsfiddle中发布的SVG是不同的。