svg viewbox không nên thay đổi kích thước font chữSize?

Question

Tôi đang sử dụng svg với viewBox cho phù hợp với container của nó làm việc tốt, khi tôi thay đổi kích cỡ container svg vòng tròn và văn bản được thay đổi kích thước và phù hợp với container nhưng tôi không muốn thay đổi kích thước fontSize khi tôi thay đổi kích cỡ container .Tôi đã tìm kiếm rất nhiều nhưng không tìm thấy bất kỳ đề xuất có giá trị nào.

Tôi cần phải thay đổi kích thước vòng tròn div và svg nên thay đổi kích thước nhưng văn bản không được thay đổi kích thước kích thước phông chữ và văn bản cũng phải di chuyển cùng với vòng tròn.

Mọi đề xuất nên được đánh giá cao.

Sau đây là SVG Tôi đang sử dụng trong ứng dụng của tôi

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

Đây là Demo

Note: Thay đổi kích thước jsFiddle

Answer 1

Xin lỗi. Không có cách nào để làm những gì bạn muốn. Có một tính năng của SVG 1.2 được gọi là TransformRef (http://www.w3.org/TR/SVGTiny12/coords.html#transform-ref) có thể hữu ích trong tình huống này, nhưng thật đáng tiếc nó không được hỗ trợ bởi bất kỳ trình duyệt AFAIK nào.

Answer 2

Di chuyển hộp xem ra khỏi thẻ svg gốc và vào thẻ svg lồng nhau. Đặt văn bản bên ngoài thẻ svg lồng nhau và viewbox sẽ không ảnh hưởng đến thẻ văn bản

<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