[英]Safari 6 svg tag use issues
Link : http://jsfiddle.net/xkpeD/ 链接: http : //jsfiddle.net/xkpeD/
or just 要不就
<svg width="300px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="50" cy="50" r="20" fill="pink" fill-opacity="0.5"/>
<use xlink:href="#:example" x="20" y="20"/>
<defs>
<circle id=":example" cx="50" cy="50" r="20" fill="pink" fill-opacity="0.5"/>
</defs>
</svg>
It displays ok in all browsers (IE9, Chrome, Firefox, Safari 5.1), but in new Safari 6 only 1 circle is rendered. 它在所有浏览器(IE9,Chrome,Firefox,Safari 5.1)中都显示正常,但在新的Safari 6中,只渲染了1个圆圈。 Seems that all <use> tags doesn't rendered in Safari 6. 似乎所有<use>标签都没有在Safari 6中呈现。
Any help please? 有什么帮助吗?
I had the same issue, OP. 我有同样的问题,OP。 I solved it by doing 2 steps 我通过两步完成了它
Separated the <use>
and the <defs>
into 2 different <svg>
's (not sure if this step is necessary, also had to do it for other reasons). 将<use>
和<defs>
分成2个不同的<svg>
(不确定是否需要此步骤,还必须出于其他原因)。 Side note, if an <svg>
only has <defs>
, you can use style="display: none;"
旁注,如果<svg>
只有<defs>
,你可以使用style="display: none;"
to make it not take space in the layout. 使它不占用布局中的空间。
Moved the <svg>
containing the <defs>
ABOVE the <svg>
containing the <use>
in my HTML. 移动<svg>
包含<defs>
ABOVE包含HTML中<use>
的<svg>
。 This step is crucial. 这一步至关重要。
Hope this helps. 希望这可以帮助。 Necessary and working for Safari Version 7.1.2 as of today, 12/19/14 截至今天12/19/14,Safari版本7.1.2是必需的并且正在工作
sam.kozin's answer worked for me. sam.kozin的回答对我有用。 Just so that this answer actually has visibility. 这样,这个答案实际上具有可见性。
Replace <use ... /> with <use ...></use> 将<use ... />替换为<use ...> </ use>
So: 所以:
<svg width="300px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="50" cy="50" r="20" fill="pink" fill-opacity="0.5"/>
<use xlink:href="#:example" x="20" y="20"></use>
<defs>
<circle id=":example" cx="50" cy="50" r="20" fill="pink" fill-opacity="0.5"/>
</defs>
</svg>
I was using <use href="">
that was rendering without issues in Firefox / Chrome, but not in Safari. 我正在使用<use href="">
在Firefox / Chrome中没有问题但在Safari中没有问题。 So I had to change to <use xlink:href="">
and this fixed my rendering issues in Safari. 所以我不得不改为<use xlink:href="">
,这解决了我在Safari中的渲染问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.