13

コンテナーに合わせて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>

デモはこちら

注: jsFiddle のサイズを変更します

4

2 に答える 2

3

ビューボックスをルート 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>

例

于 2014-01-11T00:59:31.160 に答える