Question

所以我想显示图片路径。通过topojson坐标创建pathes。这些点位于我地图上的正确位置。接下来就是在那一点上显示一个SVG图像。

我尝试附加 svg：image ，但没有机会。我也尝试将它带入具有相同结果的路径中。我无处可见这个形象。这是一个PNG图像的例子。因为至少应该可以解决SVG问题：

var featureCollection = topojson.feature(currentMap, currentMap.objects.points);
    svgmap.append("path")
          .attr("id", "points")
          .selectAll("path")
          .data(featureCollection.features)
          .enter().append("path")
          .attr("d", path);
    svgmap.append("svg:image")
        .attr("class","svgimage")
        .attr("xlink:href", "pics/point.jpg" )
        .attr("x", -20)
        .attr("y", -20)
        .attr("width", 13)
        .attr("height", 13);

修改

svgimage.append("pattern")
        .attr("id","p1")
        .attr("patternUnits","userSpaceOnUse")
        .attr("width","32")
        .attr("height","32")
        .append("image")
        .attr("xlink:href", "pics/point.jpg" )
        .attr("width", 10)
        .attr("height", 10);
    svgmap.append("g")
        .attr("id", "points")
        .selectAll("path")
        .data(featureCollection.features)
        .enter().append("path")
        .attr("d", path)
        .attr("fill", "url(#p1)");

但仍然没有工作。

EDIT2

我提到这是一个大小问题。所以我现在玩了一些大小，在那里我可以看到更多，但大多数都没有完全成像。只是某些部分的圆圈。奇怪的事情。我继续测试：

svgimage.append("pattern")
        .attr("id","p1")
        .attr("patternUnits","userSpaceOnUse")
        .attr("width","10")
        .attr("height","10")
        .append("image")
        .attr("xlink:href", "pics/point.jpg" )
        .attr("width", 15)
        .attr("height", 15);

这里是当前结果（jpg）的图片：http://i.imgur.com/T58DA1j.png还不完美。这是当我增加pointRadius（现在是SVG）时：http://i.imgur.com/Z7nZUWk.png

Answer 1

解决方案非常简单。图片的尺寸刚刚未正确设置。此外，还需要删除 userSpaceOnUse ，如果需要，您可以使用 x 和 y 设置创建位置：

svgimage.append("pattern")
        .attr("id","p1")
        .attr("width","10")
        .attr("height","10")
        .append("image")
        .attr("xlink:href", "pics/point.jpg" )
        .attr("width", 5)
        .attr("height", 5)
        .attr("x", 1)
        .attr("y", 2);

在第二部分中设置 pointRadius 非常重要。您可以直接在路径或定义中进行设置。如果您想稍后使用不同的尺寸，直接在路径中设置它会更有意义：

.attr("d", path.pointRadius(3.5))

在路径上绘制SVG图像，但需要大小

修改

EDIT2

1 个答案: