svg 경로 요소에 텍스트 마커가 표시되지 않음

웹 브라우저에서 HTML 페이지의 SVG 요소에있는 행의 시작 및/또는 끝에 텍스트 마커를 표시하려고합니다 (Chrome, Firefox 및 IE). 이것은 내 테스트 코드입니다 :svg 경로 요소에 텍스트 마커가 표시되지 않음

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
</head> 
<body> 
<svg width="500" height="500" viewport="0 0 500 500"> 
    <defs> 
     <marker id="markerCircle" markerWidth="10" markerHeight="10" refX="5" refY="5"> 
      <circle cx="5" cy="5" r="4" style="fill: black; stroke: black;"/> 
     </marker> 
     <marker id="markerTriangle" markerWidth="15" markerHeight="10" refX="0" refY="5"  orient="auto"> 
      <polygon points="0,0 0,10 15,5" style="fill: black;"/> 
     </marker> 
     <marker id="markerText" markerWidth="15" markerHeight="10" refX="0" refY="0"> 
      <text x="0" y="0">hello</text> 
     </marker> 
     <text id="textTemplate" x="0" y="0">hello</text> 
    </defs> 
    <line x1="10" y1="10" x2="100" y2="10" 
      style="stroke: black; 
       marker-start: url('#markerText'); 
       marker-end: url('#markerTriangle');"/> 
    <text x="50" y="100">hello</text> 
    <use xlink:href="#textTemplate" x="50" y="200"/> 
</svg> 
</body> 
</html>

텍스트 표시를 SVG의 요소로 직접 포함이 '정의'와 때 또한 '사용'할 때 잘. 'markerCircle'및 'markerTriangle'경로 모양은 line 요소에서 잘 작동합니다. 그러나 마커로 사용될 때는 텍스트가 표시되지 않습니다. W3 권장 사항을 올바르게 이해하면 텍스트 마커가 작동해야합니다(). 내가 도대체 뭘 잘못하고있는 겁니까? 고맙습니다.

출처

2014-12-05 Heisenberg1979

텍스트의 원점은 (기본적으로) 왼쪽 하단 구석입니다. 0,0의 텍스트는 대부분 음의 y 좌표로 표시됩니다. 마커는 (기본적으로) 상자 (0, 0, markerWidth, markerHeight)에 클립되므로 텍스트는 기본적으로 마커 보이는 영역 안에 있지 않습니다.

마커의 텍스트를 이동하거나 (y 늘리기) 오버플로를 설정할 수 있습니다.

출처

2014-12-05 09:38:46

좋아요! 두 가지 솔루션 모두 완벽하게 작동합니다. 빠른 답장을 보내 주셔서 감사합니다. – Heisenberg1979

svg 경로 요소에 텍스트 마커가 표시되지 않음

답변

관련 문제