Javascript 如何在另一个svg图像上的多个位置绘制svg_Javascript_Html_Svg_Html5 Canvas_Canvg

Javascript 如何在另一个svg图像上的多个位置绘制svg

javascript html svg html5-canvas

Javascript 如何在另一个svg图像上的多个位置绘制svg,javascript,html,svg,html5-canvas,canvg,Javascript,Html,Svg,Html5 Canvas,Canvg,我使用MS Visio 2013绘制了一张超市的平面图。我已将其转换为svg文件。我想做的是使用另一个svg文件固定楼层地图的一些位置我已经尝试过很多其他方法。我创建了一个HTML5画布，并使用javascript命令绘制地图，然后使用svg图像显示位置 ctx.drawSvg('location.svg', x_coordinate , y_coordinate , 10, 14); //x_coordinate,y_coordinate is defining the multipl

我使用MS Visio 2013绘制了一张超市的平面图。我已将其转换为svg文件。我想做的是使用另一个svg文件固定楼层地图的一些位置

我已经尝试过很多其他方法。我创建了一个HTML5画布，并使用javascript命令绘制地图，然后使用svg图像显示位置

ctx.drawSvg('location.svg', x_coordinate , y_coordinate , 10, 14);

//x_coordinate,y_coordinate is defining the multiple locations which this location.svg file will be drawn.

但该方法的结果质量较低。更不用说当你放大地图时，它的质量会变得更低

我知道将svg嵌入html页面或使用svg文件作为背景的方法，但有了这两种方法，我如何使用另一个svg文件来确定多个位置

使用svg文件有什么方法可以做到这一点吗？：）

这其实很简单。有几种方法可以做到这一点，但下面的方法可能是最简单的方法之一。它根本不使用画布，只使用纯SVG

我假设当你说“pin”是另一个文件时，这并不是一个严格的要求。也就是说，没有理由不能在地图SVG文件中包含pin图片

下面是一个示例SVG映射文件。我现在假设它嵌入在HTML文件中，但是外部文件也应该可以工作

<html>
<body>
<svg id="map" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     width="500" height="400" viewBox="0 0 500 400">

  <defs>
      <!-- Define our map "pin". Just a circle in this case.
           The circle is centred on (0,0) to make positioning at the destination point simpler. -->
      <g id="pin">
          <circle cx="0" cy="0" r="7" fill="white" stroke="green" stroke-width="2"/>
      </g>
  </defs>

  <!-- A simple floorplan map -->
  <g id="floor" fill="#ddd" stroke="black" stroke-width="3">
      <rect x="50" y="50" width="200" height="150" />
      <rect x="100" y="200" width="150" height="150" />
      <rect x="250" y="100" width="200" height="225" />
  </g>

  <!-- A group to hold the created pin refernces. Not necessary, but keeps things tidy. -->
  <g id="markers">
  </g>
</svg>
</body>
</html>

此处演示：

这是假设您想要走纯SVG路线。还有其他方法。例如，您可以使用HTML做类似的事情。将PIN文件包装在

中，使用jQuery克隆div，然后使用绝对定位将其定位到正确的位置。但是，您必须考虑调整地图比例等。

我了解您的解决方案，但我有两个外部svg文件。地图也是一个svg文件，pin也是一个svg文件。我如何使用这两个并使用pin.svg在map.svg中显示多个位置？更新了如何使用外部svg文件的示例。使用图像确实有效。您是否使用了有效的URL？我用几个演示更新了我的答案，以说明（a）它确实有效，（b）如何使用DOM函数将标记添加到地图文件中。PIN图像只是我通过Google找到的一个随机SVG文件。SVG中一行的格式是

。从您已有的

示例中可以明显看出，要向文档中添加行，您需要做些什么。我将把它作为练习留给你。你不需要对行使用

和

。只有这样，我们才能定义一次pin并重新使用它。只需将线条本身添加到图表中即可。看见

var  markerPositions = [[225,175], [75,75], [150,225], [400,125], [300,300]];

var svgNS = "http://www.w3.org/2000/svg";
var xlinkNS = "http://www.w3.org/1999/xlink";

for (var i=0; i<markerPositions.length; i++) {
    // Create an SVG <use> element
    var  use = document.createElementNS(svgNS, "use");
    // Point it at our pin marker (the circle)
    use.setAttributeNS(xlinkNS, "href", "#pin");
    // Set it's x and y
    use.setAttribute("x", markerPositions[i][0]);
    use.setAttribute("y", markerPositions[i][1]);
    // Add it to the "markers" group
    document.getElementById("markers").appendChild(use);
}

<g id="pin">
  <image xlink:href="pin.svg"/>
</g>

var  grp = document.createElementNS(svgNS, "g");
grp.id = "pin";
var  img = document.createElementNS(svgNS, "image");
img.setAttributeNS(xlinkNS, "href", "pin.pvg");
grp.appendChild(img);
document.getElementsByTagName("defs")[0].appendChild(grp);