个人中心
gpt4 book ai didi

javascript - foreignObject HTML 元素在 SVG 空间中的坐标

转载 作者：行者123 更新时间：2023-11-28 00:22:27 24 4
gpt4 key购买 nike

我有一个带有 XHTML 表格的 SVG 文件。我想将表格的某些部分与 SVG 绘图连接起来(通过 JavaScript)。例如，在以下文件中，我想将每个黄色圆圈放置在红色边框右端的中心:

<?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> 的任何转换堆栈。 .

最佳答案

下面是我想出的实际操作: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+')' );

注意事项:

  • 它在 Firefox v7 中完美运行
  • 它适用于 Chrome v16 和 Safari v5，除了:
    • 如果调整了浏览器缩放，则效果不佳。
    • 如果 <foreignObject> 不工作由于 this Webkit bug 已被旋转或倾斜.
  • 它不适用于 IE9(XHTML 未显示，getTransformToElement 不起作用)。

关于javascript - foreignObject HTML 元素在 SVG 空间中的坐标，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8030606/

24 4 0
文章推荐： javascript - JS 正则表达式限制
文章推荐： bind 返回的仿函数的 C++ 类型
文章推荐： javascript - 如何使用下划线返回对象作为 groupby 函数中的键
文章推荐： c++ - 将 TableView 中的 CheckBox 选中状态绑定(bind)到自定义模型属性
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com