在包含SVG标记元素的页面上使用基本标记无法呈现标记

一尘不染

在包含SVG标记元素的页面上使用基本标记无法呈现标记

html

尝试在基于SVG的可视化中使用SVG标记元素时遇到问题。我正在将更改添加到Web应用程序中，该更改恰好在每个页面上都包含一个基本标记，以便对CSS文件，javascript文件等的任何引用都可以是相对的。

我下面有一些示例代码可以重现该问题。有一个线元素和一个标记元素定义。该标记元素由其’marker-
end’属性中的行通过uri和标记id引用。没有基本标签，箭头显示正常。使用基本标签时，它不会显示。原因是因为基本标记更改了浏览器解析url的方式。即使对于该行的marker-
end属性中指定的基于简单id的url，也是如此。

有什么办法可以解决这个问题而不必删除基本标记？

我无法真正删除它，因为在我正在开发的产品中根深蒂固地使用了它。我的网络应用程序需要支持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>

阅读 325

2020-05-10

共1个答案

一尘不染

HTML <base>元素用于说“解析所有相对URL，而不是相对于此页面，而是相对于新位置”。在您的情况下，您已经告诉它可以相对于带有HTML页面的目录进行解析。

SVG marker-mid="url(…)"属性是FuncIRI参考。当使用这样的值时url(#foo)，通常会相对于当前页面解析相对IRI，查找具有fooid的元素。但是，当您使用时<base>，会更改其外观。

要解决此问题，请使用更好的值。由于您的基本引用是当前目录，因此您可以简单地使用当前文件的名称：

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

如果您的<base>href不同于您显示的href，例如：

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

那么您将需要使用绝对href，例如

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

2020-05-10