javascript - 在移动 Safari 中隐藏/显示内联 SVG 时出现问题
<p><p>我正在尝试为我们的图标使用内联 SVG。具体来说我是:</p>
<ul>
<li>使用 grunt 将所有 svg 组合成一个 svg sprite</li>
<li>使用 <code><use></code> 标签内联引用它们 ala <a href="http://css-tricks.com/svg-use-external-source/" rel="noreferrer noopener nofollow">this article</a> </li>
</ul>
<p>大部分情况下都运行良好。但是，当我尝试使用 JS 隐藏/显示 iOS 浏览器时遇到问题 - <a href="http://codepen.io/meanspa/pen/vEGERZ" rel="noreferrer noopener nofollow">http://codepen.io/meanspa/pen/vEGERZ</a> </p>
<pre><code>$('.expand-link').click(function(){
$('.expand-link').toggleClass('clicked');
});
</code></pre>
<p>因为对于这个 codepen，SVG 定义在 DOM 中，所以它可以正常工作，但是如果你将它们移动到外部文件并尝试在移动 Safari 中使用它，原来隐藏的 SVG (.icon-contract)当你点击它时不会显示。事实上，我发现让这项工作的唯一方法是最初将 .icon-contract 设置为 <code>display:block</code> ，然后在 JS 中设置延迟，以便在几百之后隐藏它毫秒。</p>
<p>总结一下，它看起来像在移动 Safari 中:</p>
<ul>
<li>如果您使用 <code><use></code> 标签来引用外部文件中的 svg</li>
<li>如果其中一些在页面加载时是 <code>display:none</code></li>
<li>那他们事后就不能用JS显示了</li>
</ul>
<p>还有其他人遇到过这个问题吗？ </p>
<p>谢谢。</p>
<p><strong>更新:</strong>正如 Salmonface 指出的那样，仅在 iOS 7 及更早版本上才注意到这一点，看起来它已在较新的版本中得到修复。</p></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>Chris Coyier 发布 <a href="http://css-tricks.com/forums/topic/swapping-out-svg-icons-problems-with-mobile-safari/" rel="noreferrer noopener nofollow">this workaround</a> :</p>
<p>使用“宽度:0px；高度:0px；”而不是“显示:无”。</p>
<p>到目前为止对我来说工作得很好。</p></p>
<p style="font-size: 20px;">关于javascript - 在移动 Safari 中隐藏/显示内联 SVG 时出现问题，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/27490104/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/27490104/
</a>
</p>
页:
[1]