在路径上绘制SVG图像，但视需要而定 [英] Draw SVG image on paths but as big as needed

问题描述

因此，我想在路径上显示一张图像 .这些路径是通过topojson坐标创建的.这些点在我的地图上的正确位置.因此，接下来就是在该点上显示SVG图片.

So I would like to show an image on a path. The pathes are created via topojson coordinates. The points are on the right position on my map. So the next thing is to show a SVG image on that point.

我尝试通过添加 svg:image 来进行尝试，但是没有机会.我也尝试将它带入相同结果的路径.我无处可看到该图像.这是一个带有PNG图像的示例.因为至少这样应该可以排除SVG问题:

I tried that with appending svg:image, but no chance. I also tried to bring it into the path with the same result. I nowhere can see that image. Here an example with an PNG image. Because at least that should work to exclude SVG issues:

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)");

但仍然无法正常工作.

我提到尺寸有问题.因此，我现在播放了一些尺寸，在那里可以看到更多，但是其中大多数都没有完全成像.不知何故，只是一些圆.奇怪的事情.我继续测试:

I mentioned that it is an issue with the size. So I now played a bit with the sizes and there I can see some more, but most of them are not fully imaged. Just some pieces of the cirle somehow. Strange thing. I keep on testing:

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

Here a picture of the current result (jpg): http://i.imgur.com/T58DA1j.png not yet perfect. This is when I increase the pointRadius (this is now a SVG): http://i.imgur.com/Z7nZUWk.png

推荐答案

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

The solution is pretty easy. The size of the picture was just not correctly set. Also the userSpaceOnUse needs to be deleted and if needed you can set the creation position with x and 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 .您可以直接在路径或定义中进行设置.如果您以后要使用其他大小，则将其直接设置在路径中更有意义:

and in the second part it is important to set the pointRadius. You can set it directly on the path or in the definition. If you want to use different sizes later on it makes more sense to set it in the path directly:

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

这篇关于在路径上绘制SVG图像，但视需要而定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！