防止缩放SVG的异物元素

Question

我正在使用SVG构建图表的轴”。我希望对轴的一部分使用常规的html文本和div，因此我使用<foreignobject>。我使用<g>和transform属性来应用缩放和平移以在轴上创建各种“刻度”。问题在于此转换会泄漏到文本中。假设我希望我所有的刻度名称的字体大小都为1em，然后在异物中这样设置。好吧，由于在不同轴上的变换不同，尽管所有文本都是1em，但文本的大小似乎也有所不同。

这里是我的意思的最小复制。

    <svg width="100" height="200">
      <g transform="scale(1, 1)">
        <rect x="0" y="0" width="100" height="100" style="fill: red;" />
        <foreignobject>
          <div style="font-size: 1em">this text is fine</div>
        </foreignobject>
      </g>
      <g transform="scale(2, 1)">
        <rect x="0" y="100" width="100" height="100" style="fill: blue;" />
        <foreignobject y="100" width="100" height="100">
          <div style="font-size: 1em">this text is stretched</div>
        </foreignobject>
      </g>
    </svg>