<base> 标记中断 SVG 标记结束渲染

Question

目标非常简单：我想要一条末端带有箭头的红色曲线。 This JSBin 基本上就是这样。

现在，为了避免长篇大论，我只说我花了几天时间弄清楚为什么在我的环境中，浏览器只显示只是曲线。啊哈时刻是当我将在我的页面上找到的一些额外的 <head> 行粘贴到 JSBin 时：

<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

您可以完全解析标记 url。

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

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

首先，如果你是客户端的marker-reference（比如使用d3），那么你需要像上面那样自己完全解析URL。

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

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

创建 SVG 时，请参考属性。

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

<base> 标记中断 SVG 标记结束渲染

<base> tag breaks SVG marker-end rendering

javascript

svg

d3.js

angularjs