Question

我正在尝试在行的开头和/或结尾显示文本标记，或者在Web浏览器的HTML页面上显示SVG元素中的任何路径元素（尝试使用Chrome，Firefox和IE）。这是我的测试代码：

<!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中的元素包含时，文本显示正常，并且当它被定义时#t;和＆＃39;使用＆＃39;。＆＃39; markerCircle＆＃39;和＆＃39; markerTriangle＆＃39;路径形状在线元素上工作正常。但是，当用作标记时，文本不会显示。如果我正确理解W3建议，文本标记应该有效（http://www.w3.org/TR/SVG11/painting.html#MarkerElement）。我究竟做错了什么？谢谢。

Answer 1

文本的来源（默认情况下）是左下角。 0,0处的文本主要显示在负y坐标处。标记剪辑（默认情况下）到框（0,0，markerWidth，markerHeight），因此您的文本基本上不在标记可见区域内。

您可以移动文本（增加y）或将标记上的溢出设置为可见。

文本标记在svg路径元素上不可见

1 个答案: