Question

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

<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>

Answer 1

在这里出现误导......

＆lt; object＆gt;元素本身在Chrome中运行得很好，只是在iframe中。我做了一个短暂的搜索错误，但找不到任何东西。

更新了小提琴，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中运行良好

SVG作为对象数据-uri不会在Chrome中呈现

1 个答案: