svg viewbox不应该调整文本fontSize的大小？

Question

我正在使用带有viewBox的svg以适应容器,它的工作正常,当我调整容器时,svg圈和文本正在调整大小并适合容器但我不想在调整容器大小时调整文本fontSize的大小.I搜索了很多,但没有找到任何有价值的建议.

我需要调整div和svg圆圈应调整大小,但文本不应调整字体大小,文本也应与圆圈一起移动.

任何建议都应该受到赞赏.

以下是我在我的应用程序中使用的SVG

<div id="container">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 920 620" preserveAspectRatio="none" style="overflow: hidden; position: relative;">
        <circle cx="100" cy="100" r="100" fill="green"></circle>
        <text x="100" y="100" text-anchor="middle" font="18px &quot;Arial&quot;" stroke="none" fill="#000000" font-size="20px" font-style="italic" font-weight="800" font-family="Times New Roman" opacity="1.0" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-style: italic; font-variant: normal; font-weight: 800; font-size: 18px; line-height: normal; font-family: 'Times New Roman'; opacity: 1;">
            <tspan dy="5.828125" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Circle</tspan>
        </text>
        </svg>
</div>

这是Demo

注意:调整jsFiddle的大小

Answer 1

对不起。没有办法做你想做的事。SVG 1.2 有一个称为 TransformRef 的功能（http://www.w3.org/TR/SVGTiny12/coords.html#transform-ref），该功能在这种情况下可能很有用，但遗憾的是任何一个都不支持它。浏览器据我所知。