Question

目标很简单：我想要一条弯曲的红线，末端有一个箭头。 This JSBin基本就是那个。

现在，为了避免冗长的故事，我们只是说我花了几天时间弄清楚为什么在我的环境中，浏览器只显示只是曲线。 a-ha时刻是我在页面上粘贴了一些额外的<head>行：

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<base href="/">
<meta name="description" content="">
<meta name="viewport" content="width=device-width">

轰！箭头立刻消失了。它发生在Chrome和Safari中。我庆祝了这一发现，但我仍然不明白<meta>的某些中间线是如何打破标记结束渲染的。如果它是一个跨浏览器的事件，它必须是有意的，但我不知道如何。

澄清：它似乎是导致大惊小怪的<base>标签。它是一个Angular项目，所以我需要它。我该如何解决它？

Answer 1

您可以完全解析标记网址。

如果是使用base标记的任意文档，则可以使用document.URL。例如，"url(" + document.URL + "#end" + ")"代替url(#end)（示例JSBin的第167行）。

特别是角度，有两种可能的解决方案。

首先，如果您是客户端上的标记引用（例如，使用d3），那么您需要自己完全解析URL，如上所述。

其次，如果您使用服务器端生成的SVG，则可以使用角度范围。

$scope.baseUrl = $location.absUrl();

创建SVG时，请参阅属性。

<svg>
    <defs>
        <marker id="end">...</marker>
    </defs>
    <line marker-end="url({{baseUrl}}#end)" .../>
</svg>

标签打破SVG标记结束渲染

1 个答案: