svg viewboxはテキストfontSizeのサイズを変更しないでください。

Question

コンテナにフィットするようにviewBoxでsvgを使用しています。コンテナのサイズを変更するとsvgサークルとテキストのサイズが変更され、コンテナにフィットしますが、コンテナのサイズを変更するとfontSizeのサイズを変更したくありません。私は多くを検索しましたが、貴重な提案は見つかりませんでした。

divのサイズを変更する必要があります。また、サークルのサイズを変更する必要がありますが、テキストのサイズを変更しないでください。テキストもサークルと一緒に移動する必要があります。

ご了承ください。

次は私がここに私のアプリケーションで

<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> 

を使用していSVGはDemo

注です：申し訳ありませんjsFiddle

Answer 1

のサイズを変更します。あなたが望むことをする方法はありません。 TransformRef（http://www.w3.org/TR/SVGTiny12/coords.html#transform-ref）と呼ばれるSVG 1.2の機能がありますが、この状況では役に立ちますが、悲しいことに、AFAIKのいずれのブラウザでもサポートされていません。

Answer 2

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