标签: foreignobject
Safari MacOS 异物在 svg 内无法正确缩放
更新日期
由于 Apple 是一家价值 2 万亿美元的公司，让我们尝试通过在此处提交错误报告来让他们解决此问题： https: //www.apple.com/feedback/safari.html
https://discussions.apple.com/thread/251753724?answerId=253364840022&page=1
在 Chrome 和 Firefox 中没有问题，但在 safari 中出现问题：
它应该看起来像 Chrome 中的：
如果我将固定样式=“位置：固定”添加到外部div，那么它们的位置是正确的，但它们的大小仍然是safari中较小的那个。
我尝试将 Body 添加到对象的根目录中，但这只是让它们从 Safari 中完全消失。这篇文章也提到了这一点：
Safari 不考虑应用于foreignObject 的缩放
您可以非常清楚地听到 safari（新 ie）不尊重缩放
推荐指数
解决办法
查看次数
在 SVG 元素的ForeignObject 的 HTML 中渲染自定义外部字体时遇到问题
这是一个复杂的问题。我创建了一个 Chrome 扩展，它将通过 WebSocket 从客户端接收 JSON-RPC 请求，使用 HTML 修饰渲染文本，并使用 PNG 图像响应客户端。我使用 Canvas 和 SVG 元素来使用包含我正在渲染的 HTML 的foreignObject 标签来渲染文本。除了当我需要使用外部字体时，这一切都非常有效。这里发生了三个间接级别，所以也许我对浏览器的要求太多了；但我希望不会。
您可能认为将文本直接渲染到 SVG 是一种选择，但这意味着我将失去 HTML 提供的一些丰富功能，例如自动换行。有一些针对 SVG 自动换行的技巧，但我不想走这条路。这可能只是我遇到的许多问题中的第一个。
我需要的是 SVG 标签内部的 HTML 能够识别我希望它使用的外部字体。这只需要在 Chromium 中工作，因此特定于 Chromium 的解决方案对我来说是一个可行的选择。
<link rel='preload' href='https://fonts.gstatic.com/s/roboto/v27/KFOkCnqEu92Fr1MmgVxIIzI.woff2' as='font' crossorigin='anonymous' />
<style>@font-face { font-family: Roboto; src: url('https://fonts.gstatic.com/s/roboto/v27/KFOkCnqEu92Fr1MmgVxIIzI.woff2'); } body { font-family: Roboto; font-size: 28px; }</style>
<canvas style='position:absolute; top:90px; left:394px;' id='canvas'></canvas>
<div><span style="font-family:courier; font-size:20px">External straight-HTML (works): </span>Hello World!</div><br/>
<span style='font-family:courier; font-size:20px'>HTML within SVG (doesn't work): </span><br/><br/>
<span style='font-family:courier; font-size:20px'> Text directly to SVG …推荐指数
解决办法
查看次数