7

Chrome 似乎不会<use>在内联 svg 中显示元素。这是一个示例（下面的代码或在http://www.bobwyttenbach.com/chromeuse.html查看它）：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Chrome use-tag bug?</title>
</head>
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200">
    <defs>
        <g id="test1">
            <circle cx="100" cy="100" r="50" fill="red"/>
        </g>
    </defs>
    <g>
        <rect x="0.5" y="0.5" width="199" height="199" stroke="black" fill="none"/>
        <use xlink:href="#test1" x="0" y="0"/>
    </g>
</svg>
<p>Above is inline svg with a use tag; below is the same svg linked through an object tag. Below is correct.</p>
<object data="chromeuse.svg" width="200" height="200"></object>
</body>
</html>

红色圆圈不会出现在内联 svg 中，但会在通过对象标签链接同一个 svg 时出现。Safari、Firefox、Opera 和 Internet Explorer 9 都能正确显示内联 svg。

难道我做错了什么？这是一个已知的 Chrome 错误吗（我没有找到它列出）？任何解决方法？

4

3 回答 3

1

不知道这个问题是否仍然相关，但我最近遇到了这样一个案例，我很确定其他人会遇到这个案例（尤其是那些第一次尝试使用 SVG 精灵的人）。

在我的例子中，我在一个精灵中手动加入了 16 个 SVG 图标sprite.svg，在这个文件中我省略了重要的元信息：

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

我根本没有第一行，第二行只有一个<svg>没有元属性（xmlns和xmlns:xlink）的开始标签。一旦我带回所有这些省略的元信息，我的图形sprite.svg就开始正常显示。

希望它可以帮助某人。

于 2020-07-16T14:17:19.617 回答
0

好的，所以我删除了我的上一篇文章，因为我错误地试图弄清楚为什么 use 元素对我有用，而不是对你有用。我能说的是我正在使用这个源的修改版本，https://code.google.com/p/svg-edit/，所以简而言之，我的答案是走过去看看他们是如何做到的。我相信当您从他们的库中插入图像时，它会显示出来。

于 2012-07-17T20:37:46.620 回答
0

我花了很长时间调试没有显示的内联 svg 使用元素。BobW 讨论的 chrome 错误此时似乎已修复。要完全消除由其他原因引起的相同问题，请尝试从 HTML 中注释掉<base href="somethingsomethingsomething" />标记。

当然，这可能会破坏您网站上的每个相关链接，但这些<use>元素现在会显示出来。前进一步，后退半步：）

此处的相关信息： 在包含 SVG 标记元素的页面上使用基本标记无法呈现标记

于 2016-04-21T18:18:54.237 回答