gpt4 book ai didi

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

转载 作者:技术小花猫 更新时间:2023-10-29 11:36:17 30 4
gpt4 key购买 nike

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

我在下面有一些示例代码可以重现该问题。定义了一个线元素和一个标记元素。标记元素由其“marker-end”属性中的行通过标记的 uri 和 id 引用。没有 base 标签,箭头显示正常。使用基本标签,它不会显示。原因是因为 base 标记改变了浏览器解析 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>

最佳答案

HTML <base> element用于表示“解析不是与此页面相关的所有相对 URL,而是与新位置相关的”。在您的例子中,您已经告诉它相对于包含 HTML 页面的目录进行解析。

SVG marker-mid="url(…)"属性是 FuncIRI Reference .当您使用类似 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)" />

关于html - 在包含 SVG 标记元素的页面上使用基本标记无法呈现标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18259032/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com