SVG的marker-end显示不出来的问题

问题描述：
用d3画的图，svg和div重叠画的，svg画连线和箭头，div上用d3来append出个性化的展示面板，项目首页有 <base href="/">，d3生成的svg的标签文件单独复制出来后可以看到箭头(marker-end)！

解决方案

The HTML element is used to say “resolve all relative URLs relative not to this page, but to a new location”. In your case, you’ve told it to resolve relative to the directory with the HTML page.

The SVG marker-mid=”url(…)” attribute is a FuncIRI Reference. When you use a value like url(#foo) that relative IRI is normally resolved relative to the current page, finding the element with the foo id. But, when you use , you change where it looks.

To solve this problem, use a better value. Since your base reference is the current directory, you can simply use the name of the current file:

<line … marker-mid="url(this_page_name.html#arrow)" />

If you have a different href, than what you’ve shown, like:

<base href="http://other.site.com/whee/" />

then you will need to use an absolute href, e.g.

<line … marker-mid="url(http://my.site.com/this_page_name.html#arrow)" />

如果用的Angular， 可以用$location.path！