问题标签 [xlink]

我正在使用<use xlink:href>来引用我的svg文件。
它在我的本地运行良好，但当我从 CDN 引用它时会引发错误 (CORS)。看起来好像xlink:href不允许CORS请求，但我想知道是否有任何解决方案？

另一方面，我听说这种精灵技术在SVG2上已被弃用。那么，目前使用 sprite SVG 文件的最佳解决方案是什么，它适用于所有不同的浏览器，包括移动浏览器。

我有一个带有链接的svg，例如

知道为什么链接作为 iframe 打开而不是像普通的 _self 目标一样打开吗？在我所在的同一窗口中打开链接？

单击 xlink:href 时，它会链接到正确的页面，但会忽略它应该运行的代码以及该页面的 css 样式。

背景信息：使用离子框架在移动应用程序上编码。

在 HTML 页面上显示 SVG 的代码。

.svg 文件中的代码

我有一个 SVG 格式的徽标，我希望它是完全可点击的。通过 Illustrator 设置图像地图，它现在链接到我的网页，但我希望徽标的整个矩形区域都可以点击，而不仅仅是徽标的轮廓。

我正在尝试解析 XML，但在尝试从响应中提取链接时遇到问题。

我的 XML 看起来像：

我的功能：

我可以提取id属性，但在尝试获取 URL 时出现错误

我在页面 A 上使用带有指向页面 B 的 href 链接的 SVG 元素——页面 B 有一个脚本，该脚本调用 Trianglify api 来生成背景。

但是，如果您通过单击此链接导航到页面 B，则不会触发该脚本。如果刷新页面 B 上的页面，脚本触发并且后台工作。

有人可以帮我弄清楚如何在单击 href 元素时触发此脚本吗？

（应用程序是用 express/node 和车把编写的）这就是我触发它的方式：

然后是 A 页上的按钮——

出于某种原因，我的 spinner.svg 在使用xlink:href. 将 SVG 嵌入页面并使用xlink:href似乎可以正常工作，如下面的代码片段所示。

问题：静态（和实心！）微调器而不是动画

为什么SVG的动画标签突然不生效了？参考必须有效，因为图像实际上正在显示。

编辑：这可能与阴影 dom 和外部参照有关吗？ 根据 Sara Soueidan “目标元素必须是当前 SVG 文档片段的一部分”。我可能会超载“文档片段”的含义，但对我来说，文档片段属于 Shadow DOM 领域，我怀疑 SMIL 动画可能因此在使用语句时不起作用<use>？

工作版本

这个问题的核心是一个非常有趣的问题：

display: none在包含 SVG 精灵 (s) 的 SVG 上进行设置symbol将使在其中定义和引用的剪辑路径不可用，而使用隐藏 SVGheight: 0; width: 0;将使它们起作用。

虽然这个问题有解决直接问题的答案，但它没有回答为什么会这样。我猜它与 Shadow DOM 有关：当在容器上设置时，似乎该defs部分中的 id 是不可引用的。display: none任何人都可以阐明其中的方式和原因，最好参考 SVG 或 HTML 规范？

我有两个 SVG 文件。我正在尝试将 rect.svg 的内容链接到 tst_use.svg。tst_use.svg 的内容是，

rect.svg 的内容是，

当然，这两个文件在同一个目录下。我尝试了多种组合。该代码内联工作。rect.svg 显示在浏览器中。我还可以将文件与 javascript 拼凑在一起。其他人使用这种语法。为什么 tst_use.svg 不能 xlink 到 rect.svg？

我试图通过实现这个简单而优雅的解决方案来使我的 SVG 具有焦点。

我正在使用 Typescript 和 React，这是我的代码：

我收到错误消息：

错误 TS2339：“HTMLProps”类型上不存在属性“xlinkHref”

如果是 Typescript 问题、React 缺少 svg 属性（尽管 xlinkHref 现在是 React 的一部分）或其他问题，我不知道该去哪里看。

谢谢你的帮助！