SVG 渲染问题 iOS答案

【问题标题】：SVG Rendering Issue iOSSVG 渲染问题 iOS
【发布时间】：2014-11-30 08:04:21
【问题描述】：

我正在尝试使用 SVG 分层精灵，但在移动 Safari 上遇到了一个奇怪的渲染问题。我将其归因于早期采用，但由于它的渲染率为 95%，我很想知道其他人是否有解决方案。不过，我可能只需要使用 PNG 或其他东西。

请注意，在 iOS 上，只有两个框在底部出现这种故障行为，从技术上讲，图像在负空间中重叠。还要注意图像是如何以错误的顺序呈现的。一切都向右移动一位。

示例图片之后的代码示例：

HTML

<li>
    <a id="email" href="#">
        <img src="social-icons.svg#email" width="115" height="128" alt="E-mail" />
        </a>
</li>
<li>
    <a id="github" href="#">
        <img src="social-icons.svg#github" width="115" height="128" alt="GitHub" />
    </a>
</li>
...

SCSS

li
{
    display: inline;

    &:nth-child( 1 ):after,
    &:nth-child( 3 ):after
    {
        content: ' ';
        display: block;
    }

    @for $i from 1 through 6
    {
        &:nth-child( #{$i} ) a
        {
            @if $i > 1 { top: -30px; }
            @if $i > 3 { top: -60px; }
        }
    }
    ...
}

SVG

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

    <svg:style xmlns:svg="http://www.w3.org/2000/svg" type="text/css">
        .i { display: none; }
        .i:target { display: block; }
    </svg:style>

    <svg:svg class="i" id="email" width="100%" height="100%" viewBox="0 0 458 512" xmlns:svg="http://www.w3.org/2000/svg">
        ...
    </svg:svg>

    <svg:svg class="i" id="facebook" width="100%" height="100%" viewBox="0 0 458 512" xmlns:svg="http://www.w3.org/2000/svg">
        ...
    </svg:svg>
</svg:svg>

我只是提出这个问题，因为正如我所说，它似乎工作正常，但有一些小故障。为什么图标会呈现错误的，有时甚至是部分的图像？

在我放弃并求助于光栅图像之前，我有什么可以尝试的吗？到目前为止，我一直在尝试各种随机属性——边距、相对定位、行高等——但每当我减少行间距时，它就会出现故障。如果我不这样做并在它们之间留出空间，它会呈现良好。

【问题讨论】：

标签： html ios svg

【解决方案1】：

我能够通过更改 HTML 源来解决 iOS 上的呈现问题。我没有使用 img 元素，而是将它们切换为实际的 SVG 元素，它可以工作！

有趣的是，如果我只更改第一个，一切都会很好，但为了保持一致性，我最终将它们全部切换了。

改变了这个：

<li>
    <a id="email" href="#">
        <img src="icons/queue-icons.svg#email" width="115" height="128" alt="E-mail" />
    </a>
</li>

到这里：

<li>
    <a id="email" href="#">
        <svg viewBox="0 0 115 128">
            <use xlink:href="/icons/queue-icons.svg#email"></use>
        </svg>
    </a>
</li>

感谢this article on CSS-Tricks 为我提供了一些额外的信息。

【讨论】：