9

当我在svg:foreignObject.

我制作了这个jsfiddle来演示我的问题。

div.wrapper应与 中的 位于同一位置，rect并且svg:g此 div 中的段落应按照 css 中的描述定位。

我在以下浏览器（Mac）中遇到问题：

  • Safari 6.0.3
  • 铬 26.0.1410.63
  • 傲游4.0.3.6000。

它在 Firefox 19.0.2 中可以正常工作。

我的代码有问题吗？有谁知道如何解决这个问题？

更新

我发现了这个错误，这可能是问题所在。看起来webkitforeignObject的问题跟踪器上有很多问题。

如果有人有如何将段落放置在 div 角落的解决方法，我将不胜感激。

4

2 回答 2

9

自从这篇文章和错误持续很久以来。

我实际上发现，如果您x="50" Y="50"在元素中使用属性，foreignObject它在 Chrome 中会按预期工作。

我知道它与 不一样transform，但至少您可以正确定位您的内容。

于 2016-02-23T06:01:31.640 回答
3 
<foreignObject width="200px" height="200px">
    <div xmlns="http://www.w3.org/1999/xhtml" class="wrapper" style="position: fixed">
        <p id="topleft">topleft</p>
        <p id="topright">topright</p>
        <p id="middle">middle</p>
        <p id="bottomleft">bottomleft</p>
        <p id="bottomright">bottomright</p>
    </div>
   </foreignObject>

位置：固定

于 2019-12-19T08:37:50.233 回答