问题标签 [foreignobject]

更新

由于 Apple 是 2 万亿美元的公司，让我们尝试通过在此处提交错误报告来让他们解决这个问题：https ://www.apple.com/feedback/safari.html

https://discussions.apple.com/thread/251753724?answerId=253364840022&page=1

在 Chrome 和 Firefox 中没有问题，但这里是 safari 中的问题：

它应该看起来像 chrome：

如果我将 fixed style="position: fixed" 添加到外部 div 则它们的位置正确，但 safari 中的尺寸仍然较小。

我尝试将 Body 添加到对象的根目录，但这只是让它们从 Safari 中完全消失。这篇文章也提到了它：

https://html.developreference.com/article/10640667/Safari+is+not+respecting+scaling+applied+to+a+foreignObject

你可以很清楚地看到 safari (new ie) 不尊重缩放

我正在尝试在 SVG 组件中包含一些 HTML 画布渲染图表。

但是，foreignObject 渲染在 Chrome 和 Safari 中无法正常工作。Chrome、Edge 和 Safari 中的问题是渲染对象显示在任何重叠的 SVG 元素之上。

设置 z-index 并没有什么不同。

html

css

和测试代码

锚标签在 svg foreignObject 内不起作用（css 悬停有效，但一旦点击就不会导致任何地方）。我对自定义 Recharts（图库）标签有以下标记

当我点击一个标签时，什么也没有发生。任何帮助将不胜感激。

dropshadow在 SVG 中的 a内的元素上使用 a时foreignObject，该元素在 Chrome 和 Safari 上正常工作时，不会在 Safari 上正确显示和缩放。

这是我的 SVG 代码：

和我的 CSS 代码：

移除阴影时，元素被放置在正确的位置和比例。你可以在这个 JSFiddle 上试试：https ://jsfiddle.net/odv3bh9j/

目前，我通过删除阴影找到了以下解决方法：

但我想知道是否有更好的解决方案？

我有一个像这样的 svg 元素，

两个foreignObject 中的子元素都有点击事件。foreignObjects 相互重叠。我的问题是当我点击那个div时，最后一个foreignObject的孩子的点击事件工作正常。但是，即使最后一个 foreignObject 的 div 没有与第一个 foreignObject 的 div 重叠，第一个 foreignObject 的孩子也不会触发 click 事件。简而言之，点击事件不会通过顶部的foreignObject。它阻止了那里的点击事件。

我正在尝试在 SVG 中显示一个 React 组件。我使用 foreignObject 组件在 SVG 中显示我的 React 对象（ToolbarItem）。但是，什么都没有显示。我做错了什么？谢谢你的帮助

我正在尝试使用 html2canvas 将一大块 html 转换为图像数据，以便我可以轻松地将其添加到 pdf 中。我注意到，当 html2canvas foreignObjectRendering 选项设置为 true 时，作为 SVG foreignObjects 的少数 html 在 pdf 中呈现的效果更接近于它们的实际外观，但其他一切看起来都非常错误。自然地，我希望对 html2canvas 进行两次单独的调用，一次调用未为主要的 html 块设置 foreignObjectRendering 选项，另一次将选项设置为 true 用于少数讨厌的 foreignObjects，这将是一个可行的解决方案。我决定从 DOM 中删除 foreignObjects，完成第一次渲染并将主要块添加到 pdf，然后将 foreignObjects 添加回 DOM，然后将它们传递给 html2canvas。当我尝试在重新添加的 foreignObjects 上调用 html2canvas 时，

无法在克隆的 iframe 中找到元素

以下是相关代码的概要：

有什么方法可以实现我想要做的吗？

我想替换我所有的 SVG<rect>元素，foreignObject这些元素在 FireFox 和基于 Chromium 的浏览器中运行良好，但在 Safari 中失败。

MWE：

HTML/SVG

JavaScript

Safari 失败：NoModificationAllowedError: The object can not be modified.

我知道问题出outerHTML在 HTML 命名空间上，而 SVG 在 XML 上，但有没有办法在 SVG 中完成这项工作？

感谢您对此问题的任何见解。

这是一个复杂的问题。我创建了一个 Chrome 扩展，它将通过 WebSocket 从客户端接收 JSON-RPC 请求，使用 HTML 装饰呈现文本，并使用 PNG 图像响应客户端。我正在使用 Canvas 和 SVG 元素使用包含我正在呈现的 HTML 的 foreignObject 标记来呈现文本。除了当我需要使用外部字体时，这一切都很棒。这里发生了三个级别的间接，所以也许我对浏览器的要求太多了；但我希望不会。

您可能认为直接将文本渲染到 SVG 是一种选择，但这意味着我会失去一些 HTML 提供的丰富功能，例如自动换行。SVG 的自动换行有一些技巧，但我不想走那条路。这可能只是我遇到的许多问题中的第一个。

我需要的是 SVG 标记内的 HTML 来识别我希望它使用的外部字体。这只需要在 Chromium 中工作，因此特定于 Chromium 的解决方案对我来说是一个可行的选择。

我希望有人能指出将多个复选框添加到 svg 图像的各种方法的优缺点。

我有一个大的、形状奇特的 svg，需要包含 4 个复选框作为输入。看起来有很多方法可以做到这一点，我不确定使用哪一种。

我的要求是它必须是可访问的（即每个复选框都需要 aria-label）并且它必须是可扩展的。我还希望能够指示焦点/悬停。最终图像将成为 html 站点的一部分。

1. 在图像上定位（绝对）html输入

2. 图像映射 如果我想添加链接而不是输入图像，这种方法似乎是最好的。

3. 将图层添加到 svg

4. 将 svg 路径分成多个，以便每个复选框都是其自己的唯一路径

5. 将现有 svg 与一个大路径一起使用，并通过 foreignObject 添加 html 输入