CSS : 스팬 내부 SVG 태그로 변환이 회전하지 않습니다

Question

Chartis.js를 사용하여 차트를 만들었습니다. 나는 그것의 반응이 좋기 때문에 그것을 좋아했다. 그러나 수평 레이블이 반응하지 않는 것처럼 보였습니다. 많은 공간을 보존하기 위해 X 레이블을 90도 회전하려고했지만 작동하지 않았습니다.

.ct-label.ct-horizontal.ct-end { 
    transform:rotate(90deg) !important; 
    -webkit-transform:rotate(90deg) !important; 
} 

제발 도와주세요, 당신은 당신이 외부 리소스에 차티스트 스크립트와 스타일을 이동할 때하지만 꽤 잘 작동하는 이유를 잘 모르겠어요 여기 내 바이올린 https://jsfiddle.net/740yajof/

Answer 1

볼 수 있습니다. !important 또는 공급 업체 접두사 -webkit-*은 필요 없습니다. 방금 회전 앵커를 왼쪽으로 이동하려면 transform-origin: left을 추가했습니다 (기본적으로 가운데에 있음).

.ct-label.ct-horizontal.ct-end { 
    transform:rotate(90deg); 
    transform-origin: 0; 
} 

근무 예 : https://jsfiddle.net/LukaszWiktor/15zyq0q1/