svg viewbox는 fontSize 텍스트의 크기를 조정하면 안됩니까?

컨테이너에 맞게 viewbox와 svg를 사용하고 있습니다. 컨테이너의 크기를 조정할 때 svg 원과 텍스트의 크기가 조절되고 컨테이너에 맞을 때 컨테이너 크기를 조정할 때 텍스트의 크기를 조정하지 않으려 고합니다. . 나는 많은 것을 찾았지만 어떤 가치있는 제안도 찾지 못했습니다.svg viewbox는 fontSize 텍스트의 크기를 조정하면 안됩니까?

div의 크기를 조정해야하고 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>

에 사용하고있어 SVG입니다 Demo

주 경우 : jsFiddle이

출처

2013-08-13 karthik

[데모] (http://stackoverflow.com/questions/에 영향을 미치지 않습니다 10473328/how-to-draw-non-scalable-circle-in-svg-with-javascript) 선택한 요소의 변형을 동적으로 수정할 수있는 JavaScript를 제공하여 페이지가 확대 될 때 크기를 독립적으로 유지할 수 있습니다. – Phrogz

죄송 크기를 조정합니다. 당신이 원하는 것을 할 수있는 방법이 없습니다. 이 상황에서 유용 할 수있는 TransformRef (http://www.w3.org/TR/SVGTiny12/coords.html#transform-ref)라는 SVG 1.2 기능이 있지만 슬프게도 AFAIK 브라우저에서 지원하지 않습니다.

출처

2013-08-13 13:33:06

뷰 박스를 루트 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

출처

2014-01-11 00:59:31 Brandon

예제가 문제를 해결하지 못하는 것 같습니다. 서클이 축소되면 텍스트도 여전히 축소됩니다. –

svg viewbox는 fontSize 텍스트의 크기를 조정하면 안됩니까?

답변

관련 문제