问题标签 [xlink]

我有 SVG 文件，我需要将其嵌入到 HTML 文件中（使用 HTML5<svg>标记）。这些 SVG 文件具有 JavaScript 依赖项，如下所示：

这是具有该脚本依赖性的独立 SVG图像。要激活 JavaScript，您可以单击图像，然后光标后面会出现一个框，告诉您 (x,y) 坐标。

但是，这是直接嵌入到 HTML 文档中的相同图像。根据 web 检查器，浏览器甚至从不尝试加载 JavaScript 依赖项。当您单击并在图像周围移动光标时，控制台会充满一堆参考错误。

你如何让嵌入式版本像独立版本一样加载它的 JavaScript 和功能？

我有一张非洲的 svg 地图。如果我单击一个国家/地区，我希望能够打开另一个具有该国家/地区地图的 svg 或页面。我有 svg 图片。我尝试了以下方法：

这些只是整个非洲的两个国家。我想使用 onclick 事件并通过 id 或国家名称将其链接到国家，而不必将 Xlink 放在每条路径周围。此事件将打开国家地图所在的页面。

谢谢

我正在使用 SVG 构建图标解决方案，其中部分图标需要可重用。<svg />在我的 HTML 文档中有几个不同的内联元素，这些<use />元素非常适合重用形状——矩形、路径等，甚至在 svg 元素之间也是如此。

但是，重用其他定义，比如<radialGradient />对我不起作用。当渐变<defs />在同一个元素中的一个元素中定义<svg />时，它会按预期工作，但当渐变在另一个<svg />元素中定义时则不会。

伪代码

为什么可以use从其他svg元素形成形状，但不能像这样的属性值？当我将shadow渐变移动到defs可见 svg 元素内的元素中时，参考效果很好。

这是一个说明工作和非工作的 JSFiddle：https ://jsfiddle.net/7tfna0L8/2/

解决方案

Robert Longson指出我的可重用 svg 的“存储库”有一个style. display:none对我来说，这感觉是正确的方法。毕竟，这个存储库不应该以任何方式显示。问题是浏览器优化了这一点，甚至可能根本不解析任何样式，这使得可以引用元素，但不能引用样式 （比如我的渐变）

工作 jsFiddle：https ://jsfiddle.net/atornblad/7tfna0L8/3/

我正在尝试将链接放入我的 xml。该链接将其指向学生手册。这是我的 XML 的一部分

问题是，当我尝试验证此 XML 时，它说“年份”是未分配的，而不是默认实体。'=' 也是一个错误，因为它没有被引用到任何东西。我的问题是如何使用该链接，我的代码中是否缺少任何内容？

我有一个内联 SVG，里面有指向其他 div 的链接。

在台式机和安卓移动设备上一切正常，而在 iPad 和 iPhone 上却不行。

当我点击链接时，它会闪烁，好像它已经识别出它是一个链接，但没有采取任何行动。

我的 SVG 是一张上面有 15 个图标的地图，而且非常长，因此大大简化了

jsfiddle在这里

或者下面的 CSS 和 HTML

指向嵌入在 SVG 中的外部网站的链接在 iOS 上可以正常工作，就像指向外部网站和其他 div 的普通 HTML a href 链接一样。

我可以编辑内联 SVG 以便链接在 iOS 上工作吗？如果不是，javascript会是解决方案吗？

我需要找到使用拓扑表示来定义线的方法。现在我有类似的东西：

其中 Line/Point 是点唯一 id(UIDP) 的值。

问题

1. 有没有办法让它更清楚，不仅得到 ID，而且使用参考或类似的东西得到孔点定义？
2. 如何使用 XLink 或 XPointer 制作它？
3. 如何在 XSD Schema 1.1 中定义它？

所以我有一个包含不同路径集合的 SVG 文件：

在我的网页中，我使用这些 SVG 图标：

这工作得很好，完全符合我的意图——我们foo从icons.svg文件中选择带有 id 的 SVG。

现在，如果我尝试xlink:href为标记的属性提供文件<use>的 _absolute_ 路径icons.svg，它会失败并且不返回任何内容，并且似乎无法找到该文件。.

重要的是要注意绝对路径是正确的。

上的文档xlink似乎表明绝对路径是有效值，这让我想知道为什么它对我不起作用——我错过了什么吗？

我应该考虑另一种方法吗？这不是我想要实现这样的目标的方法吗？

在玩 SVG 符号时，我花了很多时间来找出错误，但我仍然有“为什么？”的问题。

我尝试使用xlink:href这样的包含和 SVG 符号：

但图标根本没有呈现。尽管文件已正确链接。（当我单击源代码中指向 SVG 文件的链接时，我可以打开它。）

但是当我将文件复制icons.svg到同一个目录中时，我的 html 文件就在其中，然后像这样包含它：

它完美无缺。相对文件路径是否存在任何已知问题xlink:href？我猜这..是问题所在。

SVG 没有在 Firefox 中呈现，也没有在 Chrome 中呈现。但为什么？

更新

好的似乎是在没有网络服务器的情况下打开本地 HTML 文件的问题。我在浏览器中用file://. 当我通过网络服务器打开它时，两条路径都可以正常工作。

至少谷歌浏览器给出了一个提示：

从带有 URL 文件:///....../web/index.html 的框架中加载 URL 文件：//....../node_modules/icons/icons.svg#my-icon 的尝试不安全。'file:' URL 被视为唯一的安全来源。

关键是使用 IAR 链接器生成一个没有主函数的十六进制 - xlink？此代码应加载到 RL78 MCU 的 RAM 中。

我有个小问题，我习惯用这种方式使用 SVG 图标：

最近xlink:href属性已被 SVG2 弃用，所以我决定xlink:href从项目中删除所有内容，离开href MDN Doc

正如您在 MDN Docs 上看到的，建议使用href代替，xlink:href它在 Chrome 和 Edge 上运行良好，但在 Firefox 上不行。

这是项目Link的链接，如果您使用 Chrome 或 Edge 打开网站，您会在顶部导航中看到一个小图标，但在 Firefox 上没有。

¿ 有人可以给我一个解决方案吗？

PD：对不起我的英语。