-- 作者：leomay
-- 发布时间：7/5/2005 9:45:00 AM
-- [原创][求助]svg应用于地图时，tooltip显示的内容会随着地图的放大而产生偏移，怎么解决？？
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="800px" height="800px" viewbox="0 0 1600 1600" enableZoomAndPanControls="true" style="shape-rendering:geometricPrecision;text-rendering:geometricPrecision;image-rendering:optim izeQuality" onload="initialize(evt)" xmlns="http://www.w3.org/2000/svg">
<g id="disp_coord" onclick="lbc(evt)">
<rect x="100" y="50" height="200" width="200" stroke="darkslategrey" stroke-width="2" fill="grey" fill-opacity="0.4"/>
</g>
<script type="text/javascript">
<![CDATA[
var svgdoc;
var tooltip,tttelem,ttrelem;
var svgdocElement;
var scale; function initialize(evt)
{
svgdoc=evt.getTarget().getOwnerDocument();
svgdocElement = svgdoc.getDocumentElement();
scale = svgdocElement.getCurrentScale();
tttelem=svgdoc.getElementById("ttt");
ttrelem=svgdoc.getElementById("ttr");
tooltip=svgdoc.getElementById("tooltip");
}
function lbc(evt)
{ tttelem.childNodes.item(0).data=evt.clientX+","+evt.clientY;
var translateX = svgdocElement.getCurrentTranslate().getX();
var translateY = svgdocElement.getCurrentTranslate().getY();
var pixel =2/scale;
var offsetX = parseFloat(0) - translateX * pixel;
var offsetY = parseFloat(0) - translateY * pixel;
tttelem.setAttribute ('x', Math.round(offsetX + evt.getClientX() * pixel));
tttelem.setAttribute ('y', (Math.round(offsetY + evt.getClientY() * pixel-26/scale)));
var svgstyle = tttelem.getStyle();
svgstyle.setProperty ('visibility', 'visible');
svgstyle.setProperty('font-size', 24/scale);
var txtlen=tttelem.getComputedTextLength()+50/scale;
ttrelem.setAttribute ('x', (Math.round(offsetX + evt.getClientX() * pixel-txtlen/2)));
ttrelem.setAttribute ('y', (Math.round(offsetY + evt.getClientY() * pixel-52/scale)));
ttrelem.setAttribute ('width', txtlen);
ttrelem.setAttribute ('height',30/scale);
var svgstyle = ttrelem.getStyle();
svgstyle.setProperty ('visibility', 'visible');
} ]]> </script>
<g id="tooltip" visibility="hidden">
<rect id="ttr" x="0" y="0" width="100px" height="15px" fill="rgb(255,255,255)" stroke="rgb(9,0,130)" stroke-width="1px" shape-rendering="optimizeSpeed"/>
<text id="ttt" style="text-anchor:middle" x="0" y="0">dyn.text</text>
</g> </svg>
|