在包含SVG标记元素的页面上使用基本标记无法呈现标记 [英] Using base tag on a page that contains SVG marker elements fails to render marker
问题描述
在尝试在基于SVG的可视化中使用SVG标记元素时遇到了问题。我将我的更改添加到每个页面上都包含基本标记的Web应用程序，以便任何对CSS文件，JavaScript文件等的引用都可以是相对的。
下面有一些示例代码重现了这个问题。有一个线元素和一个标记元素定义。标记元素通过标记的uri和id在其marker-end属性中被引用。没有基地标签，箭头显示正常。用基本标签，它没有被显示。原因是因为base标签改变了浏览器解析urls的方式，即使对于line的marker-end属性中指定的简单的基于id的URL也是如此。
有没有什么办法可以解决这个问题，而不必删除基本标签？
我无法真正删除它，因为在im产品中使用它是相当根深蒂固的。我需要为我的web应用程序支持Firefox，Chrome和IE9 +。 Firefox和Chrome都会产生这个问题。 IE工作正常（即箭头标记显示）。
任何帮助，非常感谢。感谢名单。
< html>
< head>
< base href =。>
< style>
.link {stroke：＃999;中风不透明度：0.6; }
marker＃arrow {fill：black; }
< / style>
< / head>
< body>
< svg width =100％height =100％>
< defs>
< / defs>
< / body>
< / html>
HTML < base> 元素说解决所有相对的URL相对于这个页面，但到一个新的位置。在你的情况，你已经告诉它相对于HTML页面的目录。
SVG marker-mid =url ...）属性是一个 FuncIRI参考 。当使用像 url（#foo）这样的值时，相对IRI通常是相对于当前页面解析的，找到 foo id。但是，当你使用< base> 时，你改变它的样子。
要解决这个问题，更好的价值。由于您的基础引用是当前目录，因此您可以简单地使用当前文件的名称：
< line ... marker-mid =url（this_page_name.html＃arrow）/>
如果您有不同的< base> href，比你显示的，如：
< base href =http ：//other.site.com/whee//>
那么您将需要使用绝对href，例如
< line ... marker-mid =url（http://my.site.com/this_page_name.html#arrow）/>
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.
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 ?
I can't really remove it because the use of it is fairly ingrained in the product im 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).
Any help is greatly appreciated. Thanx.
<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>
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.
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)" />
If you have a different <base> 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)" />
这篇关于在包含SVG标记元素的页面上使用基本标记无法呈现标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
