IE9에서 SVG 텍스트의 세로 가운데 맞추는 방법

Question

SVG에서 텍스트를 세로로 정렬하려면 dominant-baseline 속성을 사용해야합니다. 이것은 SO (Aligning text in SVG)에 대해 이미 논의되었으며 the specification의 일부입니다.

내 문제는 분명히 does not support dominant-baseline 및 무리 other things IE9 것입니다.

IE9에서 dominant-baseline: central을 대략 계산하는 방법에 대한 아이디어가 있습니까?

다음은 FF 및 Chrome에서 작동하는 샘플입니다. IE9, Opera 11에서는 작동하지 않습니다. Windows의 Safari는 central을 지원하지 않지만 여전히 좋은 middle을 지원합니다.

<?xml version="1.0"?> 
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg"> 
    <path d="M 10 100 h 290" stroke="blue" stroke-width=".5" /> 
    <text x="40" y="100" font-size="16" style="dominant-baseline: auto;"> 
     XXX dominant-baseline: auto; XXX 
    </text> 

    <path d="M 10 200 h 290" stroke="blue" stroke-width=".5" /> 
    <text x="40" y="200" font-family="sans-serif" font-size="15" style="dominant-baseline: central;"> 
     XXX dominant-baseline: central XXX 
    </text> 
</svg> 

Answer 1

거대한 해킹이지만 글꼴 크기를 고려하여 수직 중간 위치를 근사 할 수 있습니다.

명세서 그런 central를 정의

는

중앙

이것은 EM 박스의 중심에 계산 기준을 식별한다.

알려진 글꼴 크기의 EM box을 가져 와서 경계 상자를 측정하여 가운데를 계산할 수 있습니다.

<?xml version="1.0"?> 
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg"> 
    <path d="M 10 100 h 290" stroke="blue" stroke-width=".5" /> 
    <text id="default-text" x="20" y="100" font-size="5em"> 
     M 
    </text> 
    <script> 
     window.onload = function() { 
      var text = document.getElementById("default-text"), 
       bbox = text.getBBox(), 
       actualHeight = (100 - bbox.y), 
       fontSize = parseInt(window.getComputedStyle(text)["fontSize"]), 
       offsetY = (actualHeight/2) - (bbox.height - fontSize); 

      text.setAttribute("transform", "translate(0, " + offsetY + ")"); 
     } 
    </script> 

    <path d="M 10 200 h 290" stroke="blue" stroke-width=".5" /> 
    <text id="reference-text" x="20" y="200" font-size="5em" 
      style="dominant-baseline: central;"> 
     M 
    </text> 
</svg> 

분명히 코드는 훨씬 더 깨끗할 수 있지만 이것은 개념 증명 일뿐입니다.

<text font-size="WHATEVER YOU WANT" text-anchor="middle" "dy"="-.4em"> M </text> 

다운 (값이 음수 인 경우) 텍스트를 이동하거나 것 "DY"속성을 설정 : IE에서이를 위해

Answer 2

당신은 그 IE9에서 작동하는지 확인 기준-변화를 시도 할 수 :

<?xml version="1.0"?> 
<svg width="300" height="500" xmlns="http://www.w3.org/2000/svg"> 
    <path d="M 10 100 h 290" stroke="blue" stroke-width=".5" /> 
    <text x="40" y="100" font-size="16" style="dominant-baseline: auto;"> 
     XXX dominant-baseline: auto; XXX 
    </text> 

    <path d="M 10 200 h 290" stroke="blue" stroke-width=".5" /> 
    <text x="40" y="200" font-family="sans-serif" font-size="15" style="dominant-baseline: central;"> 
     XXX dominant-baseline: central XXX 
    </text> 

    <path d="M 10 300 h 290" stroke="blue" stroke-width=".5" /> 
    <text x="40" y="300" font-family="sans-serif" font-size="15"> 
     <tspan style="baseline-shift:-30%;"> 
     XXX baseline-shift: -30% XXX 
     </tspan> 
    </text> 
</svg> 

파이어 폭스는하지만 기준선 교대를 지원하지 않는 것,하지만 웹킷과 오페라는 않습니다.

Answer 3

한가지 방법은 폰트 크기에 관련된 위치를 설정하는 것 (값이 양수이면). "text-anchor"속성을 설정하면 x 축의 텍스트가 IE에서 잘 맞춰집니다. 이것은 hackish 일지 모르지만, IE의 SVG 지원도 그렇습니다!