浏览器未显示正确的 SVG

Question

嗯，这很奇怪。

我有几个 svg 图片的网页。

（我还检测到不支持的 svg 浏览器并改为显示常规图像，但我想这与这里无关）。

有时（我目前在 Chrome OSX 和 Windows 中发现它），浏览器会显示另一个 svg 而不是 html 中提到的那个。

假设我必须从我的页面链接到 logo.svg 和 logo2.svg 的 svg 文件，它可能会显示 logo2.svg 而不是 logo.svg。 我检查了元素，一切似乎都很好。 HTML 指的是一个 svg，而浏览器显示的是不同的 svg（位于 html 的另一部分）。

有什么想法吗？

<a href="Home">
       <div style="float:left;width:170px;height:154px;">
           <object class="svg-default" data="/images/logo.svg" type="image/svg+xml" style="width:100%; height:100%;z-index:1000;">
           </object>
           <img class="svg-fallback" src="/images/logo.png" style="width: 151px; height: 41px; display: none;">
        </div>        
    </a>

Answer 1

也许您可以动态插入 div 元素，并将 <object> 作为其子元素。当您想显示另一个 svg 时，请删除以前的 div 并插入一个带有更新 svg 的新 div。