gpt4 book ai didi

javascript - 标签破坏了 SVG 标记端渲染

转载 作者:行者123 更新时间:2023-11-28 07:40:51 25 4
gpt4 key购买 nike

目标非常简单:我想要一条末端带有箭头的红色弯曲线。 This JSBin基本上就是这样。

现在,为了避免长篇大论,假设我花了几天时间来弄清楚为什么在我的环境中,浏览器只显示只是曲线。当我将 <head> 的一些额外行粘贴到 JSBin 中时,恍然大悟。在我的页面上找到:

<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 项目,所以我需要它。我该如何解决这个问题?

最佳答案

您可以完全解析标记网址。

如果它是使用base标签的任意文档,那么您可以使用document.URL。例如,用 "url("+ document.URL + "#end"+ ")" 代替 url(#end) (示例 JSBin 的第 167 行) 。

特别是对于 Angular ,有两种可能的解决方案。

首先,如果您是客户端上的标记引用(例如使用 d3),那么您需要按照上述方式自行完全解析 URL。

其次,如果您使用服务器端生成的 SVG,则可以使用 Angular 范围。

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

创建 SVG 时,请引用该属性。

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

关于javascript - <base> 标签破坏了 SVG 标记端渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28038777/

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