SVG 作为对象数据 uri 不在 Chrome 中呈现答案

【问题标题】：SVG as object data-uri doesn't render in ChromeSVG 作为对象数据 uri 不在 Chrome 中呈现
【发布时间】：2015-01-28 20:48:06
【问题描述】：

在链接的小提琴中，该示例适用于 IE 9 和 FF；但是，由于我无法理解的原因，它在 Chrome 中不起作用。有人有什么想法吗？

http://jsfiddle.net/pkjdzcj5/7/

<div class="test-wrapper">
    <h3>Object element with 'data' construct</h3>
    <p>For some reason data url is failing (in Chrome), but we can demo image fallback here.</p>
    <div class="test-icon icon-color" style="width:400px; height:400px;">
        <object type="image/svg+xml" width="320" height="240" data="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjEwMHB4IiBoZWlnaHQ9IjEwMHB4IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTAwIDEwMCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTkxLjE3LDgxLjM3NGwwLjAwNi0wLjAwNGwtMC4xMzktMC4yNGMtMC4wNjgtMC4xMjgtMC4xMzQtMC4yNTctMC4yMTYtMC4zNzVsLTM3LjY5LTY1LjI4MyAgIGMtMC42MTEtMS4xMDktMS43NzYtMS44Ny0zLjEzMy0xLjg3Yy0xLjQ3LDAtMi43MzEsMC44ODctMy4yODUsMi4xNTNsLTAuMDA0LTAuMDAyTDkuMzEyLDgwLjUyOWwwLjAzNiwwLjAyMSAgIGMtMC41MDUsMC42MTgtMC44MiwxLjM5Ny0wLjgyLDIuMjU3YzAsMS45ODIsMS42MDcsMy41OSwzLjU4OCwzLjU5aDBoNzUuNzY3djBjMS45ODIsMCwzLjU4OS0xLjYwNywzLjU4OS0zLjU4OSAgIEM5MS40NzIsODIuMjk3LDkxLjM2Miw4MS44MTQsOTEuMTcsODEuMzc0eiBNNTAuMDM1LDc5LjYxN2MtMi44NzQsMC01LjIwMS0yLjI1Ny01LjIwMS01LjEzYzAtMi44NzQsMi4zMjYtNS4yLDUuMjAxLTUuMiAgIGMyLjgwMywwLDUuMTMsMi4zMjUsNS4xMyw1LjJDNTUuMTY2LDc3LjM2LDUyLjgzOCw3OS42MTcsNTAuMDM1LDc5LjYxN3ogTTU1LjE2NSwzNC4yNXYyOC4yOTloLTAuMDAyICAgYzAsMC4wMDUsMC4wMDIsMC4wMSwwLjAwMiwwLjAxNmMwLDEuMTczLTAuOTUsMi4wOTQtMi4wOTQsMi4wOTRjLTAuMDA1LDAtMC4wMDktMC4wMDEtMC4wMTQtMC4wMDF2MC4wMDFoLTYuMDkzICAgYy0xLjE3NCwwLTIuMTIzLTAuOTIxLTIuMTIzLTIuMDk0YzAtMC4wMDUsMC4wMDItMC4wMSwwLjAwMi0wLjAxNmgtMC4wMDJWMzQuMzI2Yy0wLjAwMS0wLjAyNi0wLjAwOC0wLjA1MS0wLjAwOC0wLjA3NyAgIGMwLTEuMTE3LDAuODY1LTEuOTk2LDEuOTM1LTIuMDc4di0wLjAxNmg2LjI4OHYwLjAwMWMxLjE0OSwwLjAwNywyLjA3NCwwLjg5NywyLjEwMywyLjAzOWgwLjAwNXYwLjA1M1YzNC4yNSAgIEM1NS4xNjYsMzQuMjUsNTUuMTY1LDM0LjI1LDU1LjE2NSwzNC4yNXoiLz4KPC9nPgo8L3N2Zz4=">
    <img src="http://media.mediatemple.netdna-cdn.com/wp-content/themes/smashing-magazine/images/logo.png" alt="…" />
        </object>
    </div>
        <pre>
            &lt;object data="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/svgs/fi-alert.svg" type="image/svg+xml">
            &lt;img src="http://media.mediatemple.netdna-cdn.com/wp-content/themes/smashing-magazine/images/logo.png" alt="…" />
        &lt;/object>
        </pre>
</div>

【问题讨论】：

标签： google-chrome svg data-uri

【解决方案1】：

被这里的表象误导了......

已更新小提琴 http://jsfiddle.net/pkjdzcj5/9/，其行为与预期的差不多。

<object type="image/svg+xml" width="100" height="100" data="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/svgs/fi-alert.svg">
<img src="http://media.mediatemple.netdna-cdn.com/wp-content/themes/smashing-magazine/images/logo.png" alt="…" />
    </object>

但是，要明确一点：数据 URI 在 Chrome 中工作得很好

【讨论】：