13

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

我需要调整 div 的大小，并且 svg circle 应该调整大小，但文本不应该调整字体大小，并且文本应该与圆一起移动。

任何建议都应该不胜感激。

以下是我在我的应用程序中使用的 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>

这是演示

注意：调整 jsFiddle 的大小

4

2 回答 2

3

将视图框移出根 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>

例子

于 2014-01-11T00:59:31.160 回答
0

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

于 2013-08-13T13:33:06.463 回答