SVG : 내 SVG 내 텍스트 경로를 어떻게 배치합니까?

following fiddle을 고려하십시오. (파이어 폭스에서 열기) 숨겨진 상태가되지 않도록 내 SVG 내 텍스트 경로를 어떻게 배치 할 수 있습니까?SVG : 내 SVG 내 텍스트 경로를 어떻게 배치합니까?

svg 태그와 text 태그 모두에 x 및 y 속성을 추가했지만 텍스트가 이동하지 않았습니다.

<svg width="597" height="98" style="overflow:visible; "> 
<defs> 
    <path d=" M 0,0 L 596,0 M 0,96 L 596,96 " id="_x0000_i1042tp" /> 
</defs> 
<text x="10" y="40" style="font-size:48px; font-family:&quot;Times New Roman&quot;; fill:#369; " method="stretch"> 
    <textPath xlink:href="#_x0000_i1042tp" xmlns:xlink="http://www.w3.org/1999/xlink">WortArt Test3</textPath> 
</text>

또한 위의 바이올린, 문제는 웹킷 기반 브라우저가 넘치는 SVG를 숨기입니다 크롬 (또는 다른 웹킷 기반 브라우저)에서 아무것도 표시되지 않습니다. 어떻게 해결할 수 있습니까?

고맙습니다!

출처

2014-03-31 Surender Thakran

왜 부정적인 표식과 근접 표가 있습니까? html/svg와 관련된 문제입니다. –

왜 부정적인 표식인지는 모르지만 질문에 코드를 표시할만한 가치는 있습니다. – Ian

@Ian ok 그게 도움이된다면 모든 사람들이 내 SVG를 볼 수있을뿐만 아니라 그것이 생산하는 것을 볼 수 있도록 바이올린을 추가했습니다 .. –

기준선과 정렬 속성을 사용해야합니다.

http://fiddle.jshell.net/Qcaa8/1/

출처

2014-03-31 12:18:53 Anthony

우수 우수 우수 ..... 그러나 왜 'viewBox'를 사용 했습니까? –

그렇지 않으면 파손 되었기 때문입니다. 아마도 jsfiddle의 프레임 때문일 것입니다. – Anthony

변경 0,0 L 596,0 ~ 0,X L 596,X 여기서 X은 하단 텍스트 위치입니다. (이미지의 맨 위에 올리려면 텍스트의 글꼴 크기 (aprox)를 사용해야합니다.

출처

2014-03-31 11:51:50 Quentin

이후 경로 자체를 변경하여 진행할 수 있다고 생각하지 않습니다. 프로그래밍 방식으로 생성되고 나는 그 코드를 엉망으로 만들고 싶지 않다. 어떤 위치 속성을 추가하여 텍스트의 위치를 바꿀 수 없습니까? –

당신은 할 수 있습니다 여기에

<textPath dominant-baseline="hanging" xlink:href="#mypath">WortArt Test3</textPath>

크롬에서 작동 전체 바이올린입니다 : 다음은 두 번째 줄의 상단 두 줄의 내부에 그것을 얻을 것 같다,하지만 < text> 요소에서 dy을 사용하여 텍스트를 아래로 이동하거나 실제로 원하는 텍스트 기준선을 설명하도록 경로를 조정할 수 있습니다. fiddle을 참조하십시오.

overflow:visible은 Chrome에서 아무런 영향을 미치지 않으며 bug 231577으로 신고되었습니다. webkit/Safari에는 same bug도 있습니다.

출처

2014-03-31 13:40:24

SVG : 내 SVG 내 텍스트 경로를 어떻게 배치합니까?

답변

관련 문제