[text] SVG 사각형에 텍스트를 배치하고 중앙에 배치하는 방법

SVG 1.2 Tiny는 텍스트 줄 바꿈을 추가했지만 브라우저에서 찾을 수있는 대부분의 SVG 구현 (Opera 제외)은이 기능을 구현하지 않았습니다. 텍스트를 수동으로 배치하는 것은 일반적으로 개발자의 책임입니다.

SVG 1.1 사양은이 제한에 대한 개요와이를 극복 할 수있는 솔루션을 제공합니다.

각 ‘text’요소는 단일 텍스트 문자열을 렌더링합니다. SVG는 자동 줄 바꿈이나 자동 줄 바꿈을 수행하지 않습니다. 여러 줄의 텍스트 효과를 얻으려면 다음 방법 중 하나를 사용하십시오.

• 제작자 또는 제작 패키지는 줄 바꿈을 미리 계산하고 여러 ‘텍스트’요소 (각 텍스트 줄마다 하나씩)를 사용해야합니다.
• 제작자 또는 제작 패키지는 줄 바꿈을 미리 계산하고 속성 ‘x’, ‘y’, ‘dx’및 ‘dy’에 적절한 값을 가진 하나 이상의 ‘tspan’자식 요소가있는 단일 ‘text’요소를 사용해야합니다. 줄 바꾸기를 시작하는 캐릭터의 새로운 시작 위치를 설정합니다. 이 방법을 사용하면 여러 줄의 텍스트에서 사용자 텍스트를 선택할 수 있습니다 (텍스트 선택 및 클립 보드 작업 참조).
• ‘foreignObject’요소 내에 인라인으로 포함 된 XHTML [XHTML]과 같은 다른 XML 네임 스페이스에서 렌더링되도록 텍스트를 표현하십시오. (참고 :이 방법의 정확한 의미는 현재 완전히 정의되지 않았습니다.)

http://www.w3.org/TR/SVG11/text.html#Introduction

기본적으로 dy속성과 tspan요소 를 사용하여 텍스트 줄 바꿈을 시뮬레이션 할 수 있으며 사양에서 언급 한대로 일부 도구가이를 자동화 할 수 있습니다. 예를 들어 Inkscape에서 원하는 모양과 원하는 텍스트를 선택하고 텍스트-> 프레임으로 이동을 사용하십시오. 이렇게하면 줄 바꿈과 함께 텍스트를 쓸 수 있으며 모양의 경계를 기준으로 줄 바꿈됩니다. 또한 다음 지침에 따라 SVG 1.1과의 호환성을 유지하도록 Inkscape에 지시 하십시오 .
http://wiki.inkscape.org/wiki/index.php/FAQ#What_about_flowed_text.3F

또한 텍스트 줄 바꿈을 동적으로 자동화하는 데 사용할 수있는 JavaScript 라이브러리가 있습니다.
http://www.carto.net/papers/svg/textFlow/

도형을 텍스트 요소에 래핑하는 CSVG의 솔루션에 주목하는 것은 흥미 롭습니다 (예 : “버튼”예 참조) . 브라우저에서 구현을 사용할 수 없다는 점을 언급하는 것이 중요 합니다.
http://www.csse.monash.edu .au / ~ clm / csvg / about.html

나는 아직 발표하지는 않았지만 비슷한 일을 할 수 있고 웹 브라우저에서 작동하는 CSVG 영감 라이브러리를 개발했기 때문에 이것을 언급하고 있습니다.

답변

<svg width="200" height="100">
  <!--this rect should have rounded corners-->
  <rect x="0" y="0" rx="5" ry="5" width="200" height="100" stroke="red" stroke-width="10px" fill="white"/>
  <text x="50%" y="50%" alignment-baseline="middle" text-anchor="middle">CLIPPED BORDER</text>    
</svg>

<!--the outer svg here-->
<svg width="400px" height="300px">

  <!--the rect/text group-->
  <g transform="translate(50,50)">
    <rect rx="5" ry="5" width="200" height="100" stroke="green" fill="none" stroke-width="10"/>
    <svg width="200px" height="100px">
      <text x="50%" y="50%" alignment-baseline="middle" text-anchor="middle">CORRECT BORDER</text>      
    </svg>
  </g>

  <!--rest of the image's code-->
</svg>

  <g>
      <rect x={x} y={y} width={width} height={height} />
      <text
          x={x + width / 2}
          y={y + height / 2}
          dominant-baseline="middle"
          text-anchor="middle"
      >
          {label}
      </text>
  </g>

    <svg class="svg-rect" width="50" height="40">
        <rect x="0" y="0" rx="3" ry="3" width="50" height="40" fill="#e7e7e7"></rect>
        <text x="50%" y="50%" text-anchor="middle" stroke="black" stroke-width="1px" dy=".3em">N/A</text>
    </svg>

<svg width="600" height="600">
  <!--   Circle -->
  <g transform="translate(50,40)">
    <circle cx="0" cy="0" r="35" stroke="#aaa" stroke-width="2" fill="#fff"></circle>
    <text x="0" y="0" alignment-baseline="middle" font-size="12" stroke-width="0" stroke="#000" text-anchor="middle">HueLink</text>
  </g>
  
  <!--   In Rectangle text position needs to be given half of width and height of rectangle respectively -->
  <!--   Rectangle -->
  <g transform="translate(150,20)">
    <rect width="150" height="40" stroke="#aaa" stroke-width="2" fill="#fff"></rect>
    <text x="75" y="20" alignment-baseline="middle" font-size="12" stroke-width="0" stroke="#000" text-anchor="middle">HueLink</text>
  </g>
  
  <!--   Rectangle -->
  <g transform="translate(120,140)">
    <ellipse cx="0" cy="0" rx="100" ry="50" stroke="#aaa" stroke-width="2" fill="#fff"></ellipse>
    <text x="0" y="0" alignment-baseline="middle" font-size="12" stroke-width="0" stroke="#000" text-anchor="middle">HueLink</text>
  </g>
  
  
</svg>

<svg width="200" height="100">
    <g>
        <rect x="0" y="0" width="200" height="100" style="stroke:red; stroke-width:3px; fill:white;"/>
        <text x="50%" y="50%" style="dominant-baseline:central; text-anchor:middle; font-size:40px;">TEXT</text>
    </g>
</svg>