文本标记在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路径元素上不可见

回答

相关问题