Javascript <；基地>；标记中断SVG标记结束渲染

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

现在，为了避免长话短说，让我们假设我花了几天时间弄清楚为什么在我的环境中，浏览器只显示曲线。当我将页面上的

多行内容粘贴到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中。我庆祝了这一发现，但我仍然不明白一些中等水平的

行是如何破坏标记端渲染的。如果这是一个跨浏览器事件，那一定是有意为之，但我就是不知道怎么做

---

澄清：似乎是

标签引起了混乱。这是一个角度的项目，所以我需要它。如何解决此问题？

您可以完全解析标记url

如果是使用

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>


...
Well darn的可能副本，从我身边滑过。谢谢你的参考！