tspan 요소의 배경색

Question

SVG <tspan> 요소 배경색을 지정할 수 있습니까? 그렇지 않다면 시뮬레이션을위한 가장 좋은 방법은 무엇입니까?

목표는 텍스트 배경색을 지정하는 것이며, <tspan> 요소를 채우는 것이 완벽 할 것이라고 생각했습니다. 이미 여러 줄 텍스트의 줄을 나타내는 텍스트 청크 (<tspan> 요소)를 "개요"합니다.

내가 함께 일하고 있어요 예 : I 시도

<text x="100" y="100" font-size="30"> 
    <tspan>hello</tspan> 
    <tspan x="100" dy="1.2em">world</tspan> 
</text> 

"fill"속성하지만 그 뒤에이 아닌 영역, 텍스트의 (색상) 채우기에 영향을 줄 것으로 보인다 :

<tspan fill="yellow">hello</tspan> 

또한 CSS를 통해 배경색을 설정해 보았습니다.

<style type="text/css">tspan { background-color: yellow }</tspan> 

.하지만 적어도 작동하지 않습니다 (Chrome 17 및 Firefox 12). "입력"을

포장 <g>에서 tspan (또는 <g> 자체를 텍스트) 중 하나가 작동하지 않습니다

<g fill="yellow"><tspan>hello</tspan></g> 
<tspan><g fill="yellow">hello</g></tspan> 

를 제외하고 동일한 위치에 배치 된 <rect> 요소를 만들 수 - 내가 원하는 뭔가를 피하십시오 - 이것을 달성하는 또 다른 방법이 있습니까?

Answer 1

가장 간단한 방법은 텍스트를 가장 단순하게 처리하는 것입니다.

tspans는 SVG 1.1에서 "배경"자체가 없으며, 배경은 tspan 이전에 그려진 배경입니다. tspan이 원 모양을 가진 textPath 안에있는 경우와 같이 고려해야 할 많은 경우가 있습니다. 또한 모든 경우에 연속 사각형과 같이 단순하지는 않습니다. 단일 tspan은 변형, 글리프 위치 지정 등으로 인해 교차 및 비 교차 셰이프로 비뚤어지고 회전되고 분할 될 수 있습니다.

다른 방법이 있습니다. 그것이 스크립팅없이 이것을 할 것이라고 생각할 수 있지만, 그때 당신은 사전에 (예 : monospaced 글꼴을 사용하여) 문자열의 너비를 알아야 할 것입니다. 그런 다음 Ahem 글꼴을 사용하여 다른 tspan 요소를 추가하고 문서의 다른 tspan 앞에 배치하고 "배경"을 부여 할 tspan과 동일한 x, y 위치를 부여 할 수 있습니다.

그렇지 않으면 스크립팅을 통해 사각형을 추가하거나 Ahem 형 글꼴이있는 tspan을 추가하는 방법이 있습니다.

Answer 2

SVG는 이미지 배경색을 직접 지정할 수 없지만 viewBox 속성의 네 가지 값을 조정할 수 있습니다 (복잡함). 나는 당신이 피하고 싶은 것을 알고 있지만, CSS는 당신을 도와주지 않을 것입니다.

... 또는 getBBox 및 getCTM을 사용할 수 있습니다. 회전 된 텍스트에 이점이 있습니다. 예 : http://srufaculty.sru.edu/david.dailey/svg/getCTM.svg