SVG를위한 javascript 생성 된 제목 툴팁을 표시하는 방법

SVG 요소에 대한 툴팁을 얻으려고합니다. SVG는 자바 스크립트에서 생성되는대로 나는, 자바 스크립트에서 툴팁을 생성해야,SVG를위한 javascript 생성 된 제목 툴팁을 표시하는 방법

<svg xmlns="http://www.w3.org/2000/svg"> 
    <rect id="test" x="20" y="30" width="200" height="150"> 
    <title>Test tooltip</title> 
    </rect> 
</svg>

을하지만 (테스트는 파이어 폭스 16.0.2에서) 나는이 작은 예를 시도하고 그것을 잘 작동합니다. 때 마우스를 통해 그 제외하고, 나는 파이어 폭스의 결과를 검사 할 때

<script type="text/javascript"> function test(text) { var title = document.createElement("title") title.text = text document.getElementById("test").appendChild(title) } </script> </head> <body onload="test('Test tooltip')"> <svg xmlns="http://www.w3.org/2000/svg"> <rect id="test" x="20" y="30" width="200" height="150"> </rect> </svg>

제목 개체는 HTML/SVG에서 발생하는 제목과 동일 나타납니다 : 그래서 그냥 첫 번째 테스트로, 난 그냥 툴팁을 생성하는 시도 도구 설명이없는 사각형! 내가 도대체 뭘 잘못하고있는 겁니까?

출처

2012-11-24 Michael

title 요소는 기본 네임 스페이스가 아닌 SVG 네임 스페이스에 있어야합니다. 따라서 createElementNS()을 사용해야합니다. 또한 SVG title 요소에는 text 속성이 없습니다. 대신 textContent을 사용하십시오. 그럼,이 작동합니다 :

<script type="text/javascript"> 
function test(text) { 
    var title = document.createElementNS("http://www.w3.org/2000/svg","title") 
    title.textContent = text 
    document.getElementById("test").appendChild(title) 
} 

</script> 
</head> 

<body onload="test('Test tooltip')"> 

<svg xmlns="http://www.w3.org/2000/svg"> 
    <rect id="test" x="20" y="30" width="200" height="150"> 
    </rect> 
</svg>

출처

2012-11-24 22:19:41

만약 우리가 '사용'안에'제목'을 넣어 작동합니까? – codenamezero

@codenamezero 당신은 ''과 같은 의미입니까, 아니면 사용에 의해 참조되는 요소의 제목을 의미합니까? 두 경우 모두 : 그냥 시도해보고 결과에 대해 다시보고하십시오. –

예, ''은 제목을 표시하지 않기 때문에 올바른 방법입니다. – codenamezero

SVG를위한 javascript 생성 된 제목 툴팁을 표시하는 방법

답변

관련 문제