在路径上绘制 SVG 图像，但要尽可能大答案

【问题标题】：Draw SVG image on paths but as big as needed在路径上绘制 SVG 图像，但要尽可能大
【发布时间】：2015-03-27 15:22:05
【问题描述】：

所以我想在路径上显示图像。路径是通过 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

【问题讨论】：

见stackoverflow.com/questions/3796025/…
是的，已经看过了。往上看。它仍然无法正常工作。 =( 我尝试为此创建一个 jsfiddle。
好的，编辑后的代码可以运行，但有一个大问题。我有 20 分，但现在只有一个（5 分！）得到了图像，也是在重新加载后。其他的仍然不可见（没有背景）。
添加了显示问题的图片。

标签： javascript svg d3.js coordinates topojson

【解决方案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))

【讨论】：