Question

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

Answer 1

您已为图案中使用的图像声明了错误的宽度和高度。它太小了，所以没有任何表现。将代码更改为：

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

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

1 个答案: