<base> 标签破坏了 SVG 标记结束渲染答案

【问题标题】：<base> tag breaks SVG marker-end rendering<base> 标签破坏了 SVG 标记结束渲染
【发布时间】：2015-01-20 06:08:45
【问题描述】：

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

现在，为了避免长篇大论，假设我花了几天时间弄清楚为什么在我的环境中，浏览器只显示只是曲线。哈哈，我在 JSBin 中粘贴了一些额外的 <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 项目，所以我需要它。我该如何解决？

【问题讨论】：

Angular and SVG filters的可能重复
该死的，从我这里溜走了。感谢您的参考！

标签： javascript angularjs svg d3.js

【解决方案1】：

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

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

特别是对于 Angular，有两种可能的解决方案。

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

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

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

创建 SVG 时，请参考属性。

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

【讨论】：