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

【问题标题】：svg viewbox should not resize the text fontSize?svg viewbox 不应该调整文本 fontSize 的大小？
【发布时间】：2013-08-15 00:18:37
【问题描述】：

我正在使用带有 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 的大小

【问题讨论】：

在this demo 中，我提供了一些 JavaScript，可以动态修改所选元素的转换，以使它们在页面缩放时保持独立缩放。

标签： javascript jquery svg

【解决方案1】：

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

【讨论】：

【解决方案2】：

将视图框从根 svg 标记中移出并放入嵌套的 svg 标记中。将文本放在嵌套的svg标签之外，viewbox不会影响文本标签

<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

【讨论】：

该示例似乎无法解决问题。随着圆圈的缩小，文本仍然会缩小。
@JohnathanElmore 这似乎不是我的经验。您是否打开了示例链接？减小 rx 的值不会改变文本的大小。在某些时候，文本甚至超出了圆圈的边界。
@Brandon 您链接的小提琴和您答案中的代码不一样。在小提琴中没有嵌套的svg，它只是一个带有圆圈和文本的。也许这就是混乱的来源。