2014-12-05 77 views
0

我試圖在網頁瀏覽器中的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)。我究竟做錯了什麼?謝謝。

回答

1

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

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

+0

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