Javascript 在没有D3.js的地图上加载SVG图像会将它们设置到错误的位置

我想创建一个地图，例如山脉。首先，我加载了大纲，然后我想创建点，在点上设置SVG图像。这不起作用，因为它只是填满了圆点，我没有机会调整它的大小而不使圆点变大

所以我的第二种方法是在没有d3.js的情况下加载坐标。这很有效，我能够画出我想要的所有点的山。但是请看一下这个fiddle jsfiddle.net/kwoxer/5uc17jwr/13。正如你所看到的，它不是在所有山脉的正确位置

当然，我对*xxxx做了一些疯狂的事情，但是投影没有做任何其他事情，或者是吗？嗯，我认为这是一个投影问题或其他什么，但真的没有关于这一点的线索。有人能告诉我在这条路上做了什么吗。我的意思是你加载的所有内容。attrd，path

我所需要的只是在地图上的特定点上从topojson显示SVG图像。但似乎没有人想要这样=

下面是小提琴重要部分的一些代码片段：

featureCollection = featureCollection.features;
        var svgNS = "http://www.w3.org/2000/svg";
        var xlinkNS = "http://www.w3.org/1999/xlink";
        for (var i=0; i<featureCollection.length; i++) {
            var  use = document.createElementNS(svgNS, "use");
            use.setAttributeNS(xlinkNS, "href", "#svgmounntain");
            var x = (featureCollection[i].geometry.coordinates[0])*8750;
            var y = (featureCollection[i].geometry.coordinates[1])*-7550;
            use.setAttribute("x",x);
            use.setAttribute("y", y);
            document.getElementById("markers").appendChild(use);
        }

---

同时，我让它和D3一起工作。此代码来自：

只需注意大小和数量。有关更多信息，请查看该链接

var featureCollection = topojson.feature(currentMap, currentMap.objects.testarea);
    svgmap.append("g")
          .attr("id", "testarea")
          .selectAll("path")
          .data(featureCollection.features)
          .enter().append("path")
          .attr("d", path);

svgimage
        .attr("id","svgmounntain")
        .append("svg:image")
        .attr("xlink:xlink:href", "http://imgh.us/blub_1.svg" )
        .attr("width", "10")
        .attr("height", "10");

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