在包含 SVG 标记元素的页面上使用基本标记无法呈现标记 [英] Using base tag on a page that contains SVG marker elements fails to render marker
问题描述
我在尝试在基于 SVG 的可视化中使用 SVG 标记元素时遇到了问题.我正在将我的更改添加到 Web 应用程序中，该应用程序恰好在每个页面上都包含一个基本标记，因此对 CSS 文件、javascript 文件等的任何引用都可以是相对的.
I've run into a problem while attempting to use SVG marker elements in an SVG based visualization. I'm adding my changes to a web application which happens to include a base tag on every page, so that any references to CSS files, javascript files, etc can be relative.
我在下面有一些示例代码可以重现该问题.定义了一个线元素和一个标记元素.标记元素由其 'marker-end' 属性中的行通过标记的 uri 和 id 引用.没有基本标签，箭头显示正常.对于基本标签，它不会显示.原因是因为 base 标签改变了浏览器解析 url 的方式......即使对于在该行的 marker-end 属性中指定的简单的基于 id 的 url 也是如此.
I have some example code below which reproduces the issue. There is a line element, and a marker element defined. The marker element is referenced by the line in its 'marker-end' attribute, via uri and id of marker. Without the base tag, the arrow displays fine. With the base tag, it is not shown. The reason is because the base tag changes the way the browser resolves urls.. even for the simple id based url specified in the marker-end attribute of the line.
有什么方法可以解决这个问题而不必删除基本标签?
Is there any way I can get around this problem without having to remove the base tag?
我无法真正删除它，因为它的使用在我正在开发的产品中已经根深蒂固.我的网络应用程序需要支持 Firefox、Chrome 和 IE9+.Firefox 和 chrome 都会产生这个问题.IE 工作正常(即箭头标记显示).
I can't really remove it because the use of it is fairly ingrained in the product I'm working on. I need to support Firefox, Chrome and IE9+ for my webapp. Firefox and chrome both produce this problem. IE works fine (ie. arrow marker displays).
<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>
推荐答案
HTML
The HTML <base> 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.
SVG marker-mid="url(…)" 属性是一个 FuncIRI 参考.当您使用像 url(#foo) 这样的值时，相对 IRI 通常是相对于当前页面解析的，找到具有 foo id 的元素.但是，当你使用
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 <base>, 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)" />
如果您的 <base> href 与您显示的内容不同，例如:
If you have a different <base> href, than what you've shown, like:
<base href="http://other.site.com/whee/" />
那么你需要使用绝对的href，例如
then you will need to use an absolute href, e.g.
<line … marker-mid="url(http://my.site.com/this_page_name.html#arrow)" />
这篇关于在包含 SVG 标记元素的页面上使用基本标记无法呈现标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
