SVG< use> Chrome中的元素未显示 [英] SVG <use> elements in Chrome not displayed
问题描述
Chrome似乎不会在内联svg中显示<code>< use> 元素。以下是一个示例（代码如下或在 http://www.bobwyttenbach.com/chromeuse.html ）：
<！DOCTYPE html>
< html>
< head>
< meta charset =utf-8>
< title> Chrome使用标记错误？< / title>
< / head>
< body>
< svg version =1.1xmlns =http://www.w3.org/2000/svgxmlns：xlink =http://www.w3.org/1999/xlinkx = 0pxy =0pxwidth =200pxheight =200pxviewBox =0 0 200 200>
< defs>
< g id =test1>
< circle cx =100cy =100r =50fill =red/>
< / g>
< / defs>
< g>
< rect x =0.5y =0.5width =199height =199stroke =blackfill =none/>
< use xlink：href =＃test1x =0y =0/>
< / g>
< / svg>
< p>以上是带有使用标签的内联svg;下面是通过对象标签链接的相同svg。以下是正确的。< / p>
< object data =chromeuse.svgwidth =200height =200>< / object>
< / body>
< / html>
红色圆圈不会出现在内联svg中，但是当同一个svg通过对象标签。 Safari，Firefox，Opera和Internet Explorer 9都能正确显示内联svg。
我做错了什么？这是一个已知的Chrome错误（我还没有找到它的列表）？任何解决方法？
我花了很长时间调试内联svg use元素没有显示出来。 BobW讨论的铬错误在这个时候似乎是固定的。为了消除由于其他原因导致的相同问题，请尝试从HTML中注释< base href =somethingsomethingsomething/> 标签。
当然，这可能会破坏您网站上的所有相关链接，但现在 相关信息在这里： Chrome seems not to display The red circle does not appear in the inline svg but does appear when the same svg is linked through an object tag. Safari, Firefox, Opera, and Internet Explorer 9 all display the inline svg correctly. Am I doing something wrong? Is this a known Chrome bug (I haven't found it listed)? Any workarounds? I spent a long time debugging inline svg use elements not showing up. The chrome bug discussed by BobW seems fixed at this time. To eliminate the same issue caused by something else entirely, try commenting out the Of course, this will likely break every relative link on your site, but the Related info here:
Using base tag on a page that contains SVG marker elements fails to render marker 这篇关于SVG< use> Chrome中的元素未显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
在页面上使用基本标记无法呈现标记在页面上使用基本标记包含SVG标记元素无法呈现标记使用基本标记在页面上包含SVG标记元素失败 <use> elements in inline svg. Here is an example (code below or view it at 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>
<base href="somethingsomethingsomething" /> tag from your HTML. <use> elements now show up. One step forward, half a step back :)
