尝试在基于SVG的可视化中使用SVG标记元素时遇到了问题.我正在将我的更改添加到Web应用程序中,该应用程序恰好在每个页面上都包含一个基本标记,因此对CSS文件,javascript文件等的任何引用都可以是相对的.
我在下面有一些示例代码可以重现该问题.有一个line元素,并定义了一个标记元素.标记元素由其"marker-end"属性中的行引用,通过uri和id of marker.没有基本标签,箭头显示正常.使用基本标记时,未显示.原因是因为基本标记改变了浏览器解析URL的方式..即使是在行的marker-end属性中指定的基于简单id的url.
有没有办法解决这个问题而不必删除基本标签？
我无法真正删除它,因为它的使用在我正在研究的产品中相当根深蒂固.我需要为我的webapp支持Firefox,Chrome和IE9 +.Firefox和Chrome都会产生这个问题.IE工作正常(即箭头标记显示).
<html>
<head>
<base href=".">
<style>
.link { stroke: #999; stroke-opacity: .6; }
marker#arrow { fill: black; }
</style>
</head>
<body>
<svg width="100%" height="100%">
<defs>
<marker id="arrow" viewBox="0 -5 10 10" refX="0" refY="0" markerWidth="20" markerHeight="20" orient="auto">
<path d="M0,-5L10,0L0,5"></path>
</marker>
</defs>
<line x1="100" y1="100" x2="333" y2="333" marker-start="url(#arrow)" class="link"></line>
</svg>
</body>
</html>