SVGforeignObject 在 Safari 上无法正常工作

问题描述 投票：0回答：11

我在 Safari 上遇到 SVG 的foreignObjects 元素问题。我正在使用 SVG 元素以及我正在使用的 d3.js 库。

我所做的就是在画布上附加一个foreignObject元素，因为与矩形或其他SVG元素不同，不允许将html元素放入其中。现在，经过几天的开发，我注意到 Safari 似乎不允许将 html 元素放入foreignObject 中。更好的是，它允许执行操作，并且根据检查员的说法，所有操作似乎都有效，但是我放入foreignObject 中的内容有一个背景集。

结果是我可以正确地将foreignObject和div拖到画布内，但与Chrome或Firefox不同的是，div的背景停留在画布左上角而不是跟随div。

在下面，我粘贴了附加到画布的样式和外来对象代码的部分

SVG

<foreignObject transform="translate(304,215)rotate(-174.86597769360367)" height="180" width="40" class="dragging">
<div class="new-rect" style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIIAAAC0CAYAAABYIPRNAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAERJJREFUeNrsnWtwXOV5x//ntverpNWuJMuyZF1tbNkIg7kkJsQ0DLfEJlDaiWmY0qSXD23TGWinaWcgnU7L0KRJ2xQw01BCEnBDYyg0QLCpDXbCRQLbwndb99tqtdr79ew5fd6zkiBf+nnZPj+PbFnaPZr1+zvP+3/e9+yxZJomGEbmfwKGRWBYBIZFYFgEhkVg/k/Uenoxp0ZHqy9Krb4st9uN4ZERfHXffXj+Jy/ilttuxNmR+b3x6dhDiqLYZUVSJQkaddAaPVwzKhWHommj4a7IHe3dvszPfvIK7v+jr+BzN34OjzzyCEKhEHK5HGKxJZTLZVx/3bUswqei3MkyxDpJKp2CbhSRXMQDFz7K7ZckN2RVfM9YeaRU/cME9FLlxmQ2+WH7Rt9NBsqTyeUEdL1iHYsrwqeUdCYDSZJ+6+t/8PXp1mBXT3yquH99uwuKqliCGDTwkvTJZ0iWDYVceeP0qdwHnev6ur/5139V7Orq+o6qad/P5/MnpF9/Qt0g1dPK4ienhmKphKDf/2+Ly9H7G92t8JQaMT03BYfTAb8jCJkG1DCoIlBVMFcUkGUFpUoJy+klZFIlBAL+ibxj6airUdsXaYpgbn7+N+12+4FlqhIlOj5PDbVqNQ1upVIRg+Tz+3xvdHR07IBq4vLoBCJOCXanB/lcHidH3yYJKvRYAyW9tDY10BmP1tYWXLXtSpIpjUKm0BFPpPapXo/Z0NAg0Q94PhqNtlM++AeeGmoYIYFhmoGmhobhcDjclaGpYWF+HqHmEJC1oznsRqas4PDzx5FOZ+F02skBmTSoirC0tIxt26/A7XfdBE/CifhMFg76fjw1LV0au4y2lla0RCKPZTJZI5vLfYdFqNmKICsNfu8hOnu7qIxTuo9hKZZAz1A/bBQQ3Y0amkwHOtd3Ym5uEV6vC6tzvvjdZafHON2AAvgjdkiqhnRKx/xMGRPjEygVilQxWrGure3bM7OzJ+gph3kdoQYxTONOmvevTCSToBJunfUi8TtcDkuCVTxeD3UHlA8MCo2GRB8yTRUKFEkjB1SI2GTQjGFzyKDYYFWMAkmQTKUwH11AqVyiPCF9kytCrXYJqXSfQfO+y+VELpuHosjw+72olCvUF668Wjr141MGxs7pKLbCGnTxm0lfL2VltJQLWBhbRvvmIJLxMhYWZuHzeWGzlZDLFWC351AulRFfTgTrqtWuKxHSaWe+kAfN4XQmy1bwCzYFMTe5gF+9PILoRAzFJaoIqozF8YsoJ9MoJVLQ02mk5haQSURRzhZw5Pmj0IuAw6NaEimKgubmZpLKR4GyYIXKbDarsAg1GxYNjzjDVVVBW1srhUEnNJuK2FwSI2+fx9svncTExUU88NAt6Nmm47nXH8b56Zfx0djP8OKxR7H3/k342t/eixPHzuCtA8NwByQEgqG1JYZIpBlut8v6i6apGotQo8Rii+4L58+jORSiUm6r5oayDl+jH/1Dm+EPBtHc4aK/e7H/hX9B32A33j17DMMX3sFte38D9/3ePoQ6g/jSH38Bv/jxIZw4dBmN4SaoigpFFjnCRHt7O86dPYvRU6N1JUJdZYTh94edkEzc/9XfwcTkJHUA1AJSZmhdT9VBlqCXc3D73MjS9OBu8OOlHx/Fk/v3o1Sq4O4v34PzJxN0pivo3bEdl08l8NG7lA9aGuD2OuG0u1AxDARJpumZaQwPj6gsQo1C5drVvr5drCVYewMutxseXxDRqQuYGh2j5K/jzDB1CZXq45uam/C7e/ZQZ0Hh8dI5nHxzDnrFpC5Dparhw/SFBYyfATbd2AOn5kCO8kGK8kRfXx9mZmZkFqFGcbld9oDfTwNegKaqlPDt1pLy+PQFLEzNY0PfRqTiKXj8Dthtdhr0AhajkxQGVZpOPAiHu5FIxJHN5eF0aHD0heD0KCgVy/C7/VYrqpfL9D2HOLbCItRq4JFlm9PlsraINa06hecyKQRbOuBR1qN7Sxei8SUcfOFVFEo5NDQErc0nMf8XiyXEEwmEm0PY3rcVgzs2wdMGvPvWKBJLy4iEwtYxhWR2EkFVVa4INftiVNVuozNdLDWLlk8gen5VsaOxqxGeJgWB9c24XdqNV145jLfffw9ejxslEsdFAu267loMdPagpS0ETyswcyaGZCwBJ+UJMdWIY4qcICrNqmgsQk1mBJtNtI6WCCsDpes68jnA51Ks7CBav0jEhXOnz2JhbgZpmjpKJEuYWsN3jh+H32PH4K71WJ7LIblQQOu6CIrl1NpStLEiGf2sutqPrq/ypiqaaButrfWVgRPbxaKcp5ezyCaL1tdGRk7iuZ8+g3whi6X4ImWCNLWDJ/FPTz2JM5MXqnnD6cKmG9ZRnvCRSLmPL0yh44rPqfpIXBFqtiJompi/xdm7Okp6RUcqmUdf1yb4Anbra+FwGKGGABTJoA7BT/kgC3/Qj62DW+Cm5wuSiTKOv/Ihstko+nc0Vw+20o0oFETpR7EINZwRVNvKlLB6wY1B7aAJA16S4Olnfgq/14PB7QMki0ndQBoqZQqDfvk9AWSoW/C4vJgZT+C7//gDTM1cxtDWzdimdVjHEvlASKZYFaGumob6EoHmbtUKiSSByAkCm91Gf0/j2489gXc/fB8buzZgdn6aSr4LxVIeDr2ILX1Xi2FGIpXE6OgZTEyOYyk1Bq/fZgkjVhTFJWzWMVergsJTQ02LYF2wuhISrReoqUhn0jh/4SJNCRHkKDkmEkn4vAHkswUKgml6VAG9nUPUdhqYnp1EU9lnTR9zUzEklhOQ1eqVT2U6pvnx4pXJItSuCPJquhdlXCz+iAuVhRxemhLmFqPYffP12LVrB558aj89voxMIYH55THElmfR3jSE2764F7PL53D4zbdgt7lgd9mtbkMv62tVxvqHU+rrut866xq0tYlbXJhaLBWti1Mlk1pHEiKTzeKmz1+HgcEebBu4Cv29V+Hmz96GXNLAL/7nP3F8+HX0DvTjrj13kgSalS2aGkN0CMO6GMVYEUGIoWoaV4SatVqR10QQYVG0juJP2XRgdiaKq3Zegd7NG6zvP/PU9/HDf38Nt9y5Gz0bnsBUrIQ9v30PmjaQAFnA7fKJ3UxLCJERxMqjWe0eLTFWF6xYhFoUQZYVcbaudgxixVB8WqYWUqKucO/tt+Klx3+O3msG0D+4AacuvQftuB3f+vs/R9ma96vHOf7qKXQ2dFp5Il/OWpVApw/TOjYdj6aJenvDS129GlmSJWMl2VtrCHr184V4FEODW9Gl9SM1kUeFpozH//U/cOrcaRx88Xk8+tiPRGNRlSelUwvpwG277kSLu53CZElcC2mtR6wi9jJIBJNFqFEoKMqiWxBB0QqM1uXtBg1aBZ6KF997+gkM7duOzdf04d1fvreyMKTiwAvP4mvf+EscfeMcPV7F1pt70LK1ETs270RbYL1VUSplfe2YZb0Mco4zQs2KIMuSmA6EDNYGkRg0GsQtnZtxKnYJCXMJeq6CydNRbGzvxLq2Vrg8buiFIqKUB44cOQqT8uWG9U2weUvwNlJczCqUPaqbTcpKNShT9qDqwxmhZttHEkEMlNhbEHsOopyLdrK9sxOhwAbklnZg7oMkLubnsHPgOpjW5pS1gWR1FYkUtZIXZrBIH6ZZQTgUQm/fJqTk+erUUBIilKxNKhLNYBFqdx3B2nYWIqyWcJl+qQ4FoW4fZksZVOZykMoFxMaTcDlUsSCAVJEGls7wXC5DFcSwOgOvz41jJ0+gwwhj+9Vt1lvlxHsqRe4Q76ukn1VhEWp2apBM0TJaIZEQqV90eZlcgsq7HR2DHWjZ2ExdABBp92Lycgx/+Kd/guhSDENXbMXfPfIwUvkkfV+CoZsYO/AyUukFqgYRkqsEh8NpHbtEYdNhd3BFqOGuwSzoxer1CNTeiT+tnUjZgMfhgc9LVSPkXXvVD/7NQ3jj7dfQGong2YMncPOdn8ddd3+h2j3kgG/82QOYj09jbP48HDaXdT8Fg6YIscooOWWuCDXcNRgiIxgrXYNYCHJ7vEjNp3HsyAtwuO2INIZx85d24MG/+BYOHPgBunu2imfC4bTh3q/ci8OhQ/jM9Vdidjxh3XGlUjGtKWd1bUKERpERSDqdRahdE3TxHsWVd0Vb1UCzacimk/ho5CycHjvkLgkvPPEaxk5dwn1f/H3rkjPRYoq9g+nZGfzXc/+NykIexbIMTyACf0uFgqdKwVKyxBIdiVi6lhW5xCLUbFiUy7pebe+sawrpJC6IQTMlhG0OdPV2Y/ddu3D44CHs7NqGUDi8tsVsPX/TTsSWluDxexDQnDj6+ju47o4tkFyylStEtSkWi1ZOUMWOFYtQm1AbWBFLwQUaLI3aR1EZxMB5vE54vQFsu34LGjs8GBgaojDYSAPuxNr9k1ZWIv3hLgzsGKROo4LXD76E+Rk/Qr2NMA2xJlFGfqUjsTvsnBFqFa/XY4qFnmw2+/FVxlT2xXUG4a5u9F7TZX1pLj2HV4bfREtLaKUaVGUQnYGYBm4w+ikfeHHlDTswvTCJxu6gNfiiLRV3VRNrFF6PJ8Ei1Cg2TXvY7/c9KwKdkEHcE8nh0SjgKRi8vmft3E9mFvDe8KvY0NmOj2+TAXpOjsKlC7pxj9AK20mExBt5ZDNp6IWV3Uz6TjAYoK5EebCuOq56ejHJZOpHlPQfEgMrzlqxCphKZBBo9GPjpta1xwUCPrjtHjipJax+OKk9dMCmaHDR583h6q0PGttc8DU5sBRdtroGa7WyXDa9Xu9nTJgfcEWoUUSid9hsj07PzhYy2cx3I5EwSuUipi9HcWlkEZ5GGd6gG8nJCm797B44nTas3lJPdBkiZNrsGt47cglunw3zF+O4OD6OtiuC1pb2+MTEstPh2B0Jh0dQZ9TdXdXEBpGqad87ffp0/OLFCz8couBXSFcwc26JKoENmewUMrkCOsIbaN7XV0SQrGVlsV4gcsDxn5/GutYWjF2ag3ujhng8hl8dGznf0NC4e2Cgfwp1SN3dcFOUcBEUvV7fsydOfDhXMfMv9q679qA7HLy6KdzQoywlIaXSKIu2UVarYXFlQ1mvGKhICuUEG9Z1tuJy/PKzk/Pn1OjobHOpVLm1u7u7aH7iwhcWocYRK4v+gAh08qHH/3n/xrvvyS3s7P/yuqnZ2TPRyXlPPJ6AXdxa7xMdw2pmLOWLaGttw5F33jk3t3x533JxCol4Ev0Dm37t4lUW4VOzpqBB3GcxmUgulIs6zf/69MJibKhpXeMvM8vRhkomb00jpmFaK4tiajDKFdjEO6W8ZmJ6fvwGcTMuRVKtW/bWswR1LYKoCqt3aRdSiHexpxKp8+GW0NDAVVueXpiJBsRDaKxVWVXEHdpVo6Tbgi0N2ZSevSPgDcTcPjtSs+P4/4DE/8sbU3frCAyLwLAIDIvAsAgMi8CwCAyLwLAIDIvAsAgMi8CwCAyLwLAIDIvAsAgMi8CwCAyLwLAIDIvAsAgMi8CwCAyLwLAIDIvAsAgMi8CwCAyLwLAIDIvAsAgMi8CwCAyLwLAIDIvAsAgMwyIwLALDIjAsAsMiMCwCwyIwLALDIjAsAsMiMCwCwyIwLALDIjAsAsMiMCwCwyIwLALDIjAsAsMiMCwCwyIwLALDIjAsAsMiMCwCwyIwLALDIjAsAsMiMCwCwyIwLALDIjAsAsMiMCwCwyIwLALDIjAsAsMiMCwCwyIwLALDIjAsAsOwCAyLwLAIDIvAsAgMi8CwCAyLwLAIDIvAsAgMi8CwCAyLwLAIDIvAsAgMi8CwCAyLwLAIDIvAsAgMi8CwCAyLwLAIDIvAsAgMi8CwCAyLwNQ+/yvAAM/MO22Kfsg/AAAAAElFTkSuQmCC); left:-45px;">
</div>
</foreignObject>

风格

foreignObject{
    cursor:pointer;
    position:relative;
}
foreignObject div.new-rect{
    position: absolute;
    top: -8px;
    background-repeat: no-repeat;
    background-size: auto;
    height: 180px;
    width: 130px;
}

仅此而已。我认为我正在做 Safari 不喜欢的事情。但问题是..什么？

javascript jquery css svg
11个回答
27
投票

在 

position: "fixed"
内的 
div
上设置 
foreignObject
修复了我在 Safari 中（以及 iOS 上的 Chrome）中的foreignObject 位置。虽然它似乎没有根据 SVG 的缩放来缩放foreignObject

3
投票

我发现您需要插入一个 

<body>
元素才能使其在 Safari 中正常工作，如下所示：

<foreignObject width="170" height="28">
    <body xmlns="http://www.w3.org/1999/xhtml">
        <div>my content</div>
    </body>
</foreignObject>
3
投票

从 Safari 15.4 开始，将 

display:contents
放在 html 标签上即可将其放置到位。但是您将无法与它进行太多交互，因为包装 div 现在已从 DOM 中删除。违背了foreignObject的全部目的。跟我一起唱歌 Safari 是新的 IE

2
投票

新解决方案：

请勿在 Safari + 异物中使用以下样式：

position

webkit-transform-style

webkit-backface-visibility

transition

transform

calc
（计算结果可能不符合预期）

opacity

不使用它们也能避免风格问题

旧：

我找到@Quinn的答案，添加一些信息，首先，你需要获取你的SVG转换信息，就像是

<g class = "main-tree" transform="translate(875) scale(1.09)"></g>
。并且您可以使用 
d3.zoomTransform
来获取这些数据，
let transform = d3.zoomTransform(d3.select("#treesvg").node());

以下内容与@Quinn相同，需要选择

foreignObject
下的根元素，请勿在其他浏览器中执行代码

1
投票

尝试添加内联 

width
和 
height
作为 
foreignObject
。这似乎适用于 Safari。

<foreignObject style="overflow: visible;" y="0" x="0" width="240" height="160">
    <div class="info-panel" xmlns="http://www.w3.org/2000/xmlns/" >
        <div class="panel-text" xmlns="http://www.w3.org/2000/xmlns/">
    <h1>ForeignObject</h1>
    <p>For this to work in Safari try adding in a width and height inline on the foreignObject element. The background will also expand to the more text you add.</p>
            </div>
    </div>
</foreignObject>

演示 https://codepen.io/chrisgannon/pen/2107d092ec56025bba036934d680f2bc

1
投票

有点旧，但我希望这能有所帮助：

正如 @do-ic 建议将 

position: fixed
添加到 
foreignObject
内部的元素可以解决定位问题，但不能解决缩放问题。 为了解决规模问题，我添加了这个：

d3.zoom().on('zoom', event => {
    // zoom stuff...
    const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
    if (isSafari) {
        d3.selectAll(NODE_SELECTOR).style('transform', `scale(${transform.k})`);
    }
});


foreignObject
内的元素也应该有：
transform-origin: 0px 0px

0
投票

尝试将foreignObjects包装在组元素中。我发现尝试使用转换来设置foreignObjects 的样式在Safari 中效果不佳。此外，大多数 SVG 不能在 Firefox 的画布元素中工作。 

<g transform="translate(304,215)rotate(-174.86597769360367)">
    <foreignObject>
        <div> whatever in here </div>
    <foreignObject>
</g>
0
投票

您可以在 SVG 中使用 

<image>
元素代替 
<foreignObject>
。这可以轻松解决缩放和位置问题，避免 Safari 上的
<foreignObject>
bug

记得将 src 属性更改为 href。

0
投票

我在 iOS Safari 中发现了一个关于 

foreignObject
的奇怪错误。当我在CSS中为
opacity
（在我的例子中它是一个按钮）中的HTML内容设置
foreignObject
时，它会将其绝对定位在SVG上。但当我移除
opacity
时，它的位置符合预期。我花了几个小时来调试这个问题。

0
投票

嗨，我在没有视图框的情况下解决了这个行为，并设置了 #svg 高度和宽度尺寸

0
投票

在我的例子中，我在foreignObject标签内有html内容，并且我的html文本在iPhone的所有浏览器中都没有缩放。 我通过在所有 html 标签前添加 xlink 来修复此文本缩放问题，如下面的示例代码所示。

<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 900 900"
width="900" height="900">

<image xlink:href="img/chart.png" height="100%" width="100%" />

<foreignObject x="18%" y="1%" width="15%" height="20%">
    <xlink:body xmlns="http://www.w3.org/1999/xhtml">
        <xlink:table width="100%" height="100%">
            <xlink:tr>
                <xlink:td id="PlanetH3" align="center" valign="middle">
                    <text>Your text which is to be scaled.</text>
                </xlink:td>
            </xlink:tr>
        </xlink:table>
    </xlink:body>
</foreignObject>
</svg>

请注意，上面的代码示例中的第二行是最重要的，您必须在 svg 打开标记上定义 xlink 命名空间和 viewBox 属性。

谢谢。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.