链接SVG在IE11中不抗别名

Question

我有一个SVG的客户的标志，需要有一个颜色方案的标题(蓝色的白色)和它的反面在页脚(白色对蓝色)。为了减少负载，我使用一个带<svg>的内联<symbol>元素，在两个地方使用<svg><use xlink:href="#logo"/></svg>引用它，然后使用CSS对每个版本进行适当的样式设计。

到现在为止还好。我只需要调用SVG一次，并且可以在两个地方使用不同的样式，没有任何问题。

但是，在IE11中检查了这个设置之后，我发现链接的SVG看起来很糟糕。它似乎不是反别名，但只在链接版本。

我已经将SVG简化为这个示例的简化版本(并对客户端进行匿名化)，但是如果您在你可以在小提琴中看到这种行为。中预览它，则使用IE11。

下面是IE11中行为的屏幕截图。左边的版本是我想要的代码，但是您可以看到与右侧完整的SVG内联相比的质量下降。

​

​

为什么只有IE11 (IE9和IE10正确地呈现这一点)才会这样做？我尝试将shape-rendering="geometricPrecision"和shape-rendering="optimizeQuality"放在<svg>元素和<path>元素中，在IE11中质量没有变化。

我在这里错过了什么？

Answer 1

如果您将源代码放在代码的顶部，它似乎正在工作。

就像这样：

<svg style="display:none" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 90.44" xml:space="preserve" version="1.1">
<symbol id="logo">
    <defs>
        <clipPath clipPathUnits="userSpaceOnUse">
            <path d="m0 67.83 432 0L432 0 0 0 0 67.83Z" />
        </clipPath>
    </defs>
    <g transform="matrix(1.3333333,0,0,-1.3333333,0,90.436933)">
        <g clip-path="url(#clipPath16)">
            <g transform="translate(25.9522,0.5186)">
                <path d="m0 0c-11.91 4.19-25.95 13.63-25.95 27.69l0 28 2.56 1.2c14.27 6.65 32.15 10.42 47.85 10.42l4.44 0 0-39.62C28.9 13.63 14.86 4.19 2.95 0L1.47-0.52 0 0ZM-21.51 52.86C-10.12 58.17 7.13 62.87 24.46 62.87l0-35.18C24.46 16.11 12.05 7.91 1.47 4.19-9.1 7.91-21.51 16.11-21.51 27.69l0 25.17z" style="fill-rule:evenodd;" />
            </g>
            <g transform="translate(31.1309,54.8155)">
                <path d="M0 0C-0.02-0.01-0.05-0.02-0.07-0.03-0.05-0.02-0.02-0.01 0 0" class="s0" />
            </g>
            <g transform="translate(31.2388,54.8624)">
                <path d="M0 0C-0.04-0.01-0.07-0.03-0.11-0.05-0.07-0.03-0.04-0.01 0 0" class="s0" />
            </g>
            <g transform="translate(31.0625,54.7837)">
                <path d="M0 0C0 0 0 0-0.01 0 0 0 0 0 0 0" class="s0" />
            </g>
        </g>
    </g>
</symbol>
</svg>

<header>
<div>
    <a href="test.html"><svg viewBox="0 0 576 90.44">
        <use xlink:href="#logo"/>
    </svg></a>
</div>
<div>
    <svg viewBox="0 0 576 90.44">
        <use xlink:href="#logo"/>
    </svg>
</div>
</header>

<div class="clear"><!-- --></div>

<footer>
    <div>
    <a href="test.html"><svg viewBox="0 0 576 90.44">
        <use xlink:href="#logo"/>
    </svg></a>
</div>
<div>
    <svg viewBox="0 0 576 90.44">
        <use xlink:href="#logo"/>
    </svg>
</div>
</footer>