SVG에서 텍스트의 방향을 어떻게 바꿀 수 있습니까?

Question

여러 개의 요소 그룹을 포함하는 SVG가 있습니다. 하나의 이미지 그룹은 그 주위에 노드가 <text> 개 있습니다.

jQuery를 clone()에 사용하고 rotate(a)을 추가하여 경로가 모양 주위에 여러 번 나타나도록하십시오. 전체 그룹을 회전하면 회전 각도에 따라 텍스트 방향이 변경됩니다. 대안으로 경로를 그릴 수도 있지만, 경로의 모양을 변경하려면 좌표 재 계산을 포함하여 변경 사항을 전파해야합니다.

대신 텍스트를 동일한 상대 위치에두기를 원합니다. 회전 된 이미지에서는 수직으로 향하게됩니다.

왼쪽에서 오른쪽으로 텍스트 방향을 절대적으로 결정하도록 설정할 수있는 <g> 또는 <text> 속성이 있습니까? 그렇지 않다면 내가 원하는 최종 결과를 얻는 더 좋은 방법이 있습니까?

//Just in case this isn't blatantly obvious, this is just a mock up. You may correct any syntax errors you find, but they are NOT the source of any trouble. 
var svg = $('#container'); 
var group = $(document.createElementNS(svgns,'g')); 

group.attr('id','groupA'); 
var path = $(document.createElementNS(svgns,'path'); 
path.attr('d', 'M40 40 A9,2 0 0,1 100 40'); //A simple arc 
group.append(path); 

var text = $(document.createElementNS(svgns,'text') ; 
text.attr('class','someclass'); 
group.append(text); 

svg.append(group); 
group=group.clone(); 
group.attr('id','groupB'); 
group.attr('transform','rotate(90, 100, 100)'); //rotates both path and text around the center of image. I'd rather keep text upright, although I want it in the same relative position 
svg.append(group) 

Answer 1

먼저 텍스트와 이미지가 포함 된 그룹이 아닌 이미지 만 회전해야합니다.

둘째, here에서 getBBoxInElementSpace 및 getBoundingBoxInArbitrarySpace 기능을 사용하여, 다음과 같은 호출을 사용하여 회전 된 이미지의 경계 상자를 얻을 다음과 같이

 
var imageBBox = getBBoxInElementSpace(text,image); 

그런 다음 텍스트 위치를 업데이트

 
text.x.baseVal.getItem(0).value = imageBBox.x; 
text.y.baseVal.getItem(0).value = imageBBox.y;