SVG空間中的foreignObject HTML元素的座標

我有一個帶有XHTML表的SVG文件。我想用SVG繪圖（通過JavaScript）連接表的一部分。例如，在下面的文件我想將每個集中在紅色邊框的右端的黃色圓圈的：SVG空間中的foreignObject HTML元素的座標

<?xml version="1.0"?> 
<svg viewBox="0 0 1000 650" version="1.1" baseProfile="full" 
    xmlns="http://www.w3.org/2000/svg"> 
    <title>Connect</title> 
    <style type="text/css"><![CDATA[ 
    table { border-collapse:collapse; margin:0 auto; } 
    table td { padding:0; border-bottom:1px solid #c00;} 
    circle.dot { fill:blue } 
    ]]></style> 
    <foreignObject x="100" width="800" height="600" y="400"><body xmlns="http://www.w3.org/1999/xhtml"><table><thead><tr> 
    <th>Space</th> 
    </tr></thead><tbody> 
    <tr><td><input name="name" type="text" value="One"/></td></tr> 
    <tr><td><input name="name" type="text" value="Two"/></td></tr> 
    </tbody></table></body></foreignObject> 
    <circle class="dot" id="dot1" cx="100" cy="100" r="5" /> 
    <circle class="dot" id="dot2" cx="200" cy="100" r="5" /> 
</svg>

我怎樣才能最好地發現在全球SVG座標空間中的任意HTML元素的位置？

爲簡單起見，請隨意忽略瀏覽器大小調整以及可能包裝<foreignObject>的任何轉換堆棧。

來源

2011-11-06 Phrogz

這裏是我想出了，在行動：HTML Element Location in SVG (v2)

// Find the four corners (nw/ne/sw/se) of any HTML element embedded in 
// an SVG document, transformed into the coordinates of an arbitrary SVG 
// element in the document. 
var svgCoordsForHTMLElement = (function(svg){ 
    var svgNS= svg.namespaceURI, xhtmlNS = "http://www.w3.org/1999/xhtml"; 
    var doc = svg.ownerDocument; 
    var wrap = svg.appendChild(doc.createElementNS(svgNS,'foreignObject')); 
    var body = wrap.appendChild(doc.createElementNS(xhtmlNS,'body')); 
    if (typeof body.getBoundingClientRect != 'function') return; 
    body.style.margin = body.style.padding = 0; 
    wrap.setAttribute('x',100); 
    var broken = body.getBoundingClientRect().left != 0; 
    svg.removeChild(wrap); 
    var pt = svg.createSVGPoint(); 
    return function svgCoordsForHTMLElement(htmlEl,svgEl){ 
    if (!svgEl) svgEl = htmlEl.ownerDocument.documentElement; 
    for (var o=htmlEl;o&&o.tagName!='foreignObject';o=o.parentNode){} 
    var xform = o.getTransformToElement(svgEl); 
    if (broken) xform = o.getScreenCTM().inverse().multiply(xform); 

    var coords = {}; 
    var rect = htmlEl.getBoundingClientRect(); 
    pt.x = rect.left; pt.y = rect.top; 
    coords.nw = pt.matrixTransform(xform); 
    pt.y = rect.bottom; coords.sw = pt.matrixTransform(xform); 
    pt.x = rect.right; coords.se = pt.matrixTransform(xform); 
    pt.y = rect.top; coords.ne = pt.matrixTransform(xform); 

    return coords; 
    }; 
})(document.documentElement);

這裏是你如何使用它：

// Setting SVG group origin to bottom right of HTML element 
var pts = svgCoordsForHTMLElement(htmlEl); 
var x = pts.sw.x, y = pts.sw.y; 
svgGroup.setAttribute('transform', 'translate('+x+','+y+')');

注意事項：

它完美的火狐v7
它工作f或Chrome v16和Safari v5，但以下情況除外：
- 如果瀏覽器縮放已調整，則不起作用。
- 由於this Webkit bug，如果<foreignObject>已被旋轉或傾斜，則不起作用。
它不適用於IE9（XHTML不顯示，並且getTransformToElement不起作用）。

來源

2011-11-07 22:20:04 Phrogz

SVG空間中的foreignObject HTML元素的座標

回答

相關問題