使用模式屏蔽图像时SVG未显示

时间:2014-03-26 21:33:20

标签: svg d3.js

我正在使用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代码。

1 个答案:

答案 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是不同的。