文本標記在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'路徑形狀在線元素上工作得很好。但是，當用作標記時，文本不會顯示。如果我正確理解W3建議，文本標記應該可以工作（http://www.w3.org/TR/SVG11/painting.html#MarkerElement）。我究竟做錯了什麼？謝謝。

來源

2014-12-05 Heisenberg1979

文字的來源是（默認情況下）左下角。 0,0處的文本大部分顯示在負y座標上。標記剪輯（默認情況下）到框（0,0，markerWidth，markerHeight），因此您的文本基本上不在標記可見區域內。

您可以移動文本（增加y）或將標記的溢出設置爲可見。

來源

2014-12-05 09:38:46

太棒了！這兩種解決方案都很完美感謝您的快速回復。 – Heisenberg1979 2014-12-05 09:55:06

文本標記在svg路徑元素上不可見

回答

相關問題