<base> 标记会中断 SVG 标记端渲染

<base> tag breaks SVG marker-end rendering

本文关键字：SVG base 中断      更新时间：2023-09-26

目标很简单：我想要一条弯曲的红线，最后有一个箭头。这个JSBin基本上就是这样。

现在，为了避免长篇大论，假设我花了几天时间弄清楚为什么在我的环境中，浏览器只显示曲线。a-ha时刻是当我在JSB中粘贴一些额外的<head>行时，在我的页面上找到了：

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<base href="/">
<meta name="description" content="">
<meta name="viewport" content="width=device-width">

繁荣！箭头立即消失。它发生在Chrome和Safari中。我庆祝了这一发现，但我仍然不明白<meta>的一些中间线条是如何破坏标记端渲染的。如果是跨浏览器事件，那一定是有意为之，但我只是不知道如何。

澄清：这似乎是引起大惊小怪的<base>标签。这是一个 Angular 项目，所以我需要它。我该如何解决它？

您可以完全解析标记 URL。

如果是使用 base 标签的任意文档，则可以使用 document.URL . 例如，"url(" + document.URL + "#end" + ")"代替url(#end)（示例 JSBin 的第 167 行）。

特别是对于角度，有两种可能的解决方案。

首先，如果您是客户端上的标记引用（例如，使用 d3），则需要如上所述自行完全解析 URL。

其次，如果您使用的是服务器端生成的 SVG，则可以使用角度范围。

$scope.baseUrl = $location.absUrl();

创建 SVG 时，请参阅该属性。

<svg>
    <defs>
        <marker id="end">...</marker>
    </defs>
    <line marker-end="url({{baseUrl}}#end)" .../>
</svg>
相关文章：