问题标签 [xlink]

我正在创建一个使用 SVG 作为标题/导航的网站。起初我在 svg 中创建了超链接文本，如下所示：

但是当我向它添加一个 jquery 滚动时，我发现这在 xlinks 上不起作用。

为了解决这个问题，我决定让文本具有绝对定位以覆盖 svg，并将其添加到我的样式中：

并将项目作为列表：

我已经让它工作了，但只能在 1980px 宽的窗口上工作，因为 svg 整体重新缩放并且文本不遵循相同的模式。 http://fiddle.jshell.net/78eh5u52/9/show/

但我更喜欢“联系人”按钮的显示方式，因为它会随着 svg 重新缩放，但正如您在小提琴中看到的那样，平滑滚动效果并不适用

应该有两种方法来解决这个问题：我要么恢复将文本放在 svg 中，然后找到一种方法来获得滚动效果。或者我弄清楚如何使文本大小和位置比例与底层 svg 完全相同（svg 在 svg 之上？）

您会建议我以哪种方式尝试解决此问题，我应该研究什么？

这是我的完整代码：

http://jsfiddle.net/78eh5u52/9/

我有以下index.html文件：

和文件red.svg：

在浏览器中，我在 index.html 文件中看到 2 个圆圈。蓝色和红色。没关系。

单击它后，我想更改圆圈的颜色。在“内联”蓝色圆圈处有效。但是在插入的 svg（红色）中没有任何反应。

如何为导入的图像着色？

或者有没有其他工作方式如何导入 svg 文件？我不能使用jQuery.load()file://因为我需要从url导入文件。

在 Chrome（不是 FF、Safari）中，我无法通过类/ID/元素引用来设置外部链接（xlink:href）SVG 模板的子元素的样式。

我想知道我是否做错了什么？有没有其他人遇到过这个问题？

HTML：

演示.svg：

CSS：

我在这里发布了一个更详细的演示：

http://monopine.com/svg-demo/

在 HTML 中，如果我想做一个链接，我会写：

做一个锚我写：

并做一个链接我写：

但是对于 SVG（对于 XLINK、XPOINTER 也是如此）是非常困难的：

但如果我写：

打开的页面只有.com，而不是example.com#anchor，可能有错误吗？而在xlink中，做anchor，一定要加ID吗？

谢谢

我有一个测试页面：http ://benfrain.com/playground/svg-test/

在其上，我以多种方式插入了相同的 SVG（img、object、inline 和 background 图像）

我还实现了use在 SVG 中重用 defs 的方法（仅适用于object插入方法和“内联”插入方法）。

在控制台中，您将看到我还尝试从每个插入方法访问 SVG 内容（我知道 img 和背景图像不应通过脚本访问 - 我只是证明这一点）。

但是，在任何版本的 Internet Explorer (IE9+) 上，object插入方法无法加载外部 CSS（如评论中所述，IE 需要替代链接机制）从内部引用（通过 xlink，如果它正在工作，您会看到 6px 宽的笔划）并且它是无法通过 JavaScript 访问（适用于所有其他常青浏览器）（我的错）。

谁能澄清为什么？我已经浏览了规范：http ://www.w3.org/TR/html5/embedded-content-0.html#the-object-element但我必须承认一些技术细节超出了我的理解范围。

更新： 继罗伯特在下面的评论之后，我对上面的测试页面进行了一些调整。

首先，该对象可以通过脚本访问（菜鸟错误）。然而，怪事仍然比比皆是：

如果 SVG 具有这种格式的链接：<?xml-stylesheet href="styles.css" type="text/css"?>则 IE11 将该样式表中的样式应用到 SVG，无论它是通过 img、background-image、inline 还是对象插入到页面中（Safari/Firefox/Chrome 仅应用样式，如果SVG 是内联或通过object) 插入的。

我试图在外部文件的符号内引用一个符号，但无法让它在 Chrome 或 Firefox 中工作。

如果它们是在 html 文件的顶部定义的，我可以在另一个符号中引用一个符号，这没有问题：

但是当我尝试将此代码放在外部文件中时，符号内的符号不会显示出来。

我什至尝试了文件内符号引用外部符号的组合，但没有运气：

知道我怎样才能完成这项工作吗？我会有很多符号，我不想在 html 文件中全部定义它们。

我已经积极（并且几个小时）在网上搜索了这个答案，但我不敢问。我使用 Raphael.js，这是一个通过 JS 编程创建 SVG 的库。我想在链接中嵌入一个形状。

在 SVG 中，命名空间被添加到 SVG 标签中，以表明 xlink 的使用：

然后，例如可以通过（这个优秀的博客 tutorials.jenkov.com/svg/a-element.html ）创建一个嵌入在链接中的形状：

这是小提琴：小矩形

使用 Raphael 库（在我的示例 jquery 中），代码是：

这是小提琴：看这里

问题是它不起作用。此代码执行到以下行：

显示完美绘制的形状，但在那之后......被删除了。另一个有趣的点是，Firefox 显示 DOM 文档在执行整个代码后即两行后符合预期（我无法在此处显示，因为我的声誉显然不够......）但它很容易重现。也就是说我在 DOM 节点中清晰地看到了：

如果有人能就我的错误启发我，我会很高兴。

非常感谢

我成功地将 png 图像转换为数据 uri，然后将此数据 uri 注入到 html 元素中。

这证明数据uri是正确的。

但是由于某种原因，我找不到在客户端 dataviz 中使用 d3js 的任何方法，因此数据 uri 最终显示了预期的光栅图像。有一些东西阻止它工作。

我怀疑本机 d3js xmlns 命名空间中存在一些冲突，还是我打错了？有我的小提琴http://jsfiddle.net/xGUsu/106/。任何想法 ？

（与Why is my base64-encoded png not visible inside my svg? JS: how to encode an image.png into base64 code for data URI embedding有关？）

Whenever I try to use an svg as an image in html using the tag, any images referenced within the svg file using <image xlink:href=""> tag won't display.

This fails to display any bitmaps at all in the svg in browsers (firefox, chome, chromium, safari) but does display the image in internet explorer).

HTML FIle

SVG File

However if I place the exact same code directly in the html file as

It works.

Or if I reference the same svg file with <object data=""> it also works. Any vector objects (eg. rects) in the svg file also work fine with <img> or <object>.

If I load the svg file directly it works properly in all browsers.

Why is the img tag in html breaking my image tag xlinks in the svg file?

我对javascript很陌生，所以请多多包涵。我有一个用于显示图标的简单 .jst 文件。如果我只显示有关图标的文本，它工作正常，但是，如果我尝试制作显示超链接的文本，我的图形将不再显示。谁能解释为什么会发生这种情况？

这是显示图标的代码：

一旦我尝试输入外部链接信息，一切都消失了：

提前感谢您的帮助！