SVG 요소 중앙 처리 Chrome 대 Safari

상위 요소에 SVG 요소를 가운데 놓으려고합니다. 그러나 Chrome과 Safari간에 불일치가 있습니다. 다음 코드는 사파리에 크롬에있는 사각형 내부에 잘 텍스트를 중앙에 있지만 :SVG 요소 중앙 처리 Chrome 대 Safari

<svg width="200px" height="200px"> 
    <g transform="translate(70,70)"> 
    <path d="M -40,-40 l 80,0 l 0,80 l -80,0 l 0,-80 z" style="fill: gray"></path> 
    <g> 
     <text text-anchor="middle" dominant-baseline="middle" style="fill: white" transform="scale(2)"> 
     <tspan>test</tspan> 
     </text> 
    </g> 
    </g> 

</svg>

결과 :

https://jsfiddle.net/yq11jot0/ :이 테스트 케이스와 jsFiddle을 만들어

사각형 내부에 텍스트를 세로로 가운데에 배치하려면 어떻게합니까?

출처

2017-02-01 RemiX

합니다. Btw는 파이어 폭스조차도 'dominant-baseline'이 속성으로 사용될 때 문제가있다. 스타일 안에서 사용할 때 잘 동작한다. – Sirko

파이어 폭스를 망칠 tspan 앞뒤의 공백 문자입니다. 실제로 어떤 일이 일어나야하는지, 즉 사양이 잘못되었거나 Chrome, Firefox 또는 Safari 버그인지 여부는 확실하지 않습니다. –

Firefox가 텍스트를 아래쪽으로 푸시합니다. – Ruskin

dominant-baseline 대신 dy를 사용하는 것은 어떨까요?

<svg width="200px" height="200px"> 
 
    <g transform="translate(70,70)"> 
 
    <path d="M -40,-40 l 80,0 l 0,80 l -80,0 l 0,-80 z" style="fill: gray"></path> 
 
    <g> 
 
     <text text-anchor="middle" dy="0.25em" style="fill: white" transform="scale(2)"> 
 
     <tspan>test</tspan> 
 
     </text> 
 
    </g> 
 
    </g> 
 

 
</svg>

출처

2017-02-01 16:48:56

그것은 작동합니다. 하지만 왜? 이 마법의 숫자 "0.25em"은 무엇입니까? – RemiX

em 단위는 글꼴의 문자 M의 높이입니다. –

예, 그렇지만 글꼴 높이의 25 %를 조정해야하는 이유는 무엇입니까? – RemiX

모든 스케일링을 제거하고 (브라우저에서 문제가있을 수 있습니다) 번역 시도 ... 사파리에서이 작동합니까? 다음

<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> 
 
    <path d="M0 0 H200 V200 H0 z" fill="gray" /> 
 
    <text x="100" y="100" text-anchor="middle" dominant-baseline="middle" fill="white" font-size="100" >test</text> 
 
</svg>

참고 :

는 px 단위 x 및 y 속성을 사용 광장의 중앙에 위치
텍스트를 사용하지 않습니다.

출처

2017-02-01 17:05:03 Ruskin

크롬과 파이어 폭스에서 괜찮아 보입니다 ... IE11은 약간 밖으로 나와 있습니다 ...이 글꼴과 Robert의 dy 트릭을 함께 사용해야 할 수도 있습니다 ... 모든 글꼴 스택 변형을 확인하는 한 – Ruskin

이것은 또한 작동합니다. 그러나 크기 조정과 변환을 제거 할 필요는 없습니다. 로버트의 솔루션은 잘 작동하며 요소의 중심을 0,0에 유지합니다 (이 값은 왼쪽 상단으로 설정됩니다). – RemiX

분명히 사파리는 내부 tspan이 middle으로 설정된 지배적 인 기준선을 갖고 싶어합니다. 그래서 이것은 또한 사파리에서 작동 : 나는 사파리`지배적-baseline`를 지원하지 않습니다 추측에는 요

<svg width="500" height="500" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg"> 
 
    <g transform="translate(50,50)"> 
 
    <path class="node" d="M -40,-40 l 80,0 l 0,80 l -80,0 l 0,-80" style="fill: rgb(247, 61, 0);"></path> 
 
    <g> 
 
     <text text-anchor="middle" fill="white"><tspan dominant-baseline="middle">test</tspan></text> 
 
    </g> 
 
    </g> 
 
</svg>

출처

2017-02-03 11:47:45 RemiX

SVG 요소 중앙 처리 Chrome 대 Safari

답변

관련 문제