Question

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

我需要调整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标记移出并嵌入到嵌套的svg标记中。将文本放在嵌套的svg标记之外，视图框不会影响文本标记

<div id="container">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative;">
        <svg viewBox="0 0 920 620" preserveAspectRatio="none">
            <circle cx="100" cy="100" r="100" fill="green"></circle>
        </svg>
        <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>

Example

Answer 2

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

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

2 个答案: