dir*_*ndd 3 javascript html5 svg html5-canvas canvg
我使用MS Visio 2013绘制了超市的楼层地图.我已将其转换为svg文件.我想要做的是使用另一个svg文件指出楼层地图的一些位置.
我通过许多其他手段尝试过这个.我创建了一个html 5画布并使用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文件这样做？:)
这其实很简单.有几种方法可以做到,但以下方法可能是最简单的方法之一.它根本不使用Canvas,只是纯SVG.
我假设当你说"pin"是另一个文件时,这并不是一个严格的要求.IE浏览器.您无法在地图SVG文件中包含图片图片.
这是一个示例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>
组"楼层"是我们的平面图,并且图片已包含在该<defs>部分中.该<defs>部分中定义的东西不会自行渲染.它必须在文件的其他地方引用.
从这里你需要的只是一个简单的Javascript循环,它使用DOM <use>为每个引脚添加一个元素.
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);
}
该<use>使我们能够在SVG文件中的另一个元素的引用.因此,我们<use>为每个要放置的引脚创建一个元素.每个<use>引用我们预定义的引脚符号
这是一个演示:http://jsfiddle.net/6cFfU/3/
更新:
要使用外部"pin"文件,应从图像中引用它.
<g id="pin">
<image xlink:href="pin.svg"/>
</g>
演示:http://jsfiddle.net/6cFfU/4/
如果您甚至不允许从地图文件中引用 pin文件.然后你只需要使用一些DOM操作来插入这个标记定义.就像是:
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);
在这里演示:http://jsfiddle.net/7Mysc/1/
假设您想要使用纯SVG路线.还有其他方法.例如,你可以使用HTML做类似的事情.将您的PIN文件包装<div>在一起并使用jQuery克隆div,然后使用绝对定位将它们放置在正确的位置.然而,您必须担心调整地图比例等.