On my website, I would like to ensure that the text resizes proportionally to the content. I have added an overlay using the OpenSeadragon functionality (overlays, checkResize: false), but the issue is that the text enlarges with the zoom. I would like to achieve the same effect as the red arrow, but for text and other HTML content.

在我的网站上，我想确保文本的大小与内容成比例。我已经使用OpenSeadragon功能添加了一个覆盖图(overays，check ReSize：False)，但问题是文本会随着缩放而放大。我希望达到与红色箭头相同的效果，但适用于文本和其他HTML内容。

Issue zoom in

问题放大

Issue zoom out

问题缩小

Previously I was able to install the html-overlay plugin, everything worked perfectly. However, the more I progressed, the more content I had to resize with the plugin. After a while the website became unstable on mobile with crashes and became much less fluid.
So I added svg overlay which handles resizing differently, for shapes it works well, however I can't integrate text or other HTML content.

之前我可以安装html-overlay插件，一切都运行得很好。然而，我进步得越多，需要调整插件大小的内容就越多。一段时间后，该网站在移动设备上变得不稳定，崩溃，变得不那么流畅。所以我添加了SVG Overlay，它以不同的方式处理大小，对于形状它工作得很好，但我不能集成文本或其他HTML内容。

I would first like the text to keep the ratio of the image according to the different zoom levels by using a resize that does not crash the site, a solution like svg-overlay seems relevant to me. Maybe there are others for what I want to do, if possible natively.

我首先希望文本通过使用不会崩溃的调整大小来保持图像根据不同缩放级别的比例，像SVG-Overlay这样的解决方案似乎与我相关。如果可能的话，也许我想做的事情还有其他的。

Here is my html code:

以下是我的html代码：

<h1 id="overlay1" data-i18n="sommaire"></h1>
<img id="right-arrow-overlay" src="http://upload.wikimedia.org/wikipedia/commons/7/7a/Red_Arrow_Right.svg" alt="Right arrow" width="20" class="openseadragon-overlay" style="position: absolute; left: 244.86px; top: 205.808px; display: block;">

My viewer's initialisation:

我的浏览器初始化：

var viewer = OpenSeadragon({
  id: "seadragon-viewer",
  prefixUrl: "./openseadragon-bin-4.1.0/images/",
  tileSources: {
    Image: {
        xmlns: 'http://schemas.microsoft.com/deepzoom/2008',
        Url: "output/plumeintrepide_files/",
        Format: 'jpg',
        Overlap: "1", 
        TileSize: "254",
        Size:{ 
          Height: "40960",
          Width: "65536"
        }
    },
    overlays: [{
      id: 'overlay1',
      px: 7425,
      py: 10000,
      width: 1000,
      height: 1000,
      checkResize: false
    } , {
      id: 'right-arrow-overlay',
      px: 7425,
      py: 11000,
      width: 1000,
      height: 1000,
      checkResize: false
    }]
  }
});

I did a test with svg-overlay and d3, but for now I only display cubes. In any case the ratio is well preserved :

我用svg-overlay和d3做了一个测试，但现在我只显示立方体。在任何情况下，比例都保持良好：

svg_overlay = viewer.svgOverlay();

overlay = d3.select(svg_overlay.node());
// overlay.appendChild(document.querySelector(".text-overlay--summary"));

d3.select('.text-overlay--summary').text("I am adding text");

data = [
  {
    x: 0.13,
    y: 0.125,
    width: 0.1,
    height: 0.095
  }, {
    x: 0.5,
    y: 0.3,
    width: 0.4,
    height: 0.05
  }, {
    x: 0.6,
    y: 0.05,
    width: 0.1,
    height: 0.15
  }
];

/* Visualization
 */

rects = overlay.selectAll('rect').data(data);

rects.enter().append('rect').attrs({
  x: function(d) {
    return d.x;
  },
  y: function(d) {
    return d.y;
  },
  width: function(d) {
    return d.width;
  },
  height: function(d) {
    return d.height;
  }
});

d3.selectAll('rect').each(function() {
  return svg_overlay.onClick(this, function() {
    return console.log('click', arguments);
  });
});


/* Resize the overlay on window resize
 */

d3.select(window).on('resize', function() {
  return svg_overlay.resize();
});

I hope I was clear enough, any ideas?

我希望我说得够清楚了，有什么想法吗？

This is my test website

这是我的考试网站

For integrate HTML content in overlays and keep ratio of text elements, finally I used foreignObject :

为了在覆盖层中集成HTML内容并保持文本元素的比例，最后我使用了ForeignObject：

<div id="overlay1">
  <svg viewBox="0 0 4500 5700" xmlns="http://www.w3.org/2000/svg">
    <foreignObject x="0" y="0" width="100%" height="100%">
      <h1 data-i18n="sommaire"></h1>
      <img id="right-arrow-overlay" src="http://upload.wikimedia.org/wikipedia/commons/7/7a/Red_Arrow_Right.svg" alt="Right arrow" width="20" class="openseadragon-overlay" style="position: absolute; left: 244.86px; top: 205.808px; display: block;">
    </foreignObject>
  </svg>
</div>

So just with the native OSD functions it works. Consider putting a “will-change: transform” on text elements to avoid shaking when zooming.

因此，只要使用原生的OSD功能，它就可以工作。考虑在文本元素上添加“Will-Change：Transform”，以避免缩放时出现抖动。

I haven't yet taken the time to test by adding a lot of content.
Knowing that with the OSD html-overlay plugin on iPhone 12 mini, the site lags/crash using zoom (a lot of content to resize).

我还没有花时间通过添加很多内容来测试。知道有了iPhone 12 mini上的OSD html-overlay插件，网站在使用Zoom时会出现滞后/崩溃(有很多内容需要调整大小)。

I will update this thread as time goes on.

随着时间的推移，我会更新这个帖子。