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

Question

所以我想 show 一个 image on a 路径。路径是通过 topojson 坐标创建的。这些点在我的地图上的正确位置。所以接下来就是在那个点上显示一个 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)");

但还是不行。

编辑2

我提到这是尺寸问题。所以我现在玩了一些尺寸，在那里我可以看到更多，但其中大部分都没有完全成像。不知何故只是一些圈子。奇怪的事情。我继续测试：

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 图像，但根据需要绘制大小

Draw SVG image on paths but as big as needed

javascript

svg

coordinates

d3.js

topojson

编辑

编辑2