1

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.

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

Edit

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

But still not working.

Edit2

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

Here a picture of the current result (jpg): https://i.stack.imgur.com/1CJr2.png not yet perfect. This is when I increase the pointRadius (this is now a SVG): https://i.stack.imgur.com/kW40s.png

kwoxer
  • 3,734
  • 4
  • 40
  • 70
  • See http://stackoverflow.com/questions/3796025/fill-svg-path-element-with-a-background-image – Robert Longson Jan 28 '15 at 17:40
  • Yeah already had a look on that. See above. It's still not working. =( I try creating a jsfiddle for this. – kwoxer Jan 28 '15 at 18:08
  • Ok that edited code get it running but with a big issue. I have 20 points, but just one(the 5.!) got the image now, also after reloads. The others are still invisible(no background). – kwoxer Jan 28 '15 at 18:16
  • Added an image showing the issues. – kwoxer Jan 28 '15 at 18:48

1 Answers1

1

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

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))
kwoxer
  • 3,734
  • 4
  • 40
  • 70