带有 use 标签的内联 SVG 停止与最近的浏览器一起工作

Question

我决定最终完成这个网页大约一年了。令我惊讶的是，代码现在显示的方式与以前不同。我将其缩小到使用带有 <use> 标签的内联 SVG，它只是停止在最新的浏览器上工作。我尝试使用最新版本的 Firefox (68.0.1) 和 Opera。 Firefox 是我测试的主要浏览器，但计划在完成后与其他浏览器一起测试（当然）。

!!编辑!!我实际上是在使用一个标识符来引用 svg 文件中的一个符号，但似乎即使没有它它也会停止工作，所以让我们从它开始（示例如下......）。

 <!DOCTYPE html>
    <html lang="en-US">
    <head>
    <link rel="stylesheet" href="styles.css">
    <meta charset="UTF-8">
    
    </head>
    <body>
     <div>
    
    TEST TEXT
    
     <svg>
      <use href="imgs.svg#tst"></use>
     </svg>
             
     </div>
    </body>
    </html>
    
    
    <!-- THE ACTUAL SVG FILE CALLED imgs.svg -->
    <?xml version="1.0" encoding="utf-8"?>
    <!DOCTYPE svg>
    <svg xmlns="http://www.w3.org/2000/svg">
     <symbol id="tst" viewBox="0 0 100 100">
     <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4"  fill="yellow" />
    </symbol>         
   </svg>

Answer 1

您运行这是来自文件系统而不是网络服务器。就是这个问题。

这是由于最近修复了一个安全漏洞CVE-2015-7186

运行来自文件系统的限制现在更多了，基本上您不能再从另一个文件引用一个文件。我们正在 bug 1565509 中讨论如何解决这个问题，但由于我们目前匹配 Safari，我不确定我们是否会更改以匹配 Chrome 或 Chrome 是否会更改以匹配我们.

同时，使用网络服务器或将引用的文件转换为 a data uri 并将其嵌入到父文档中。

带有 use 标签的内联 SVG 停止与最近的浏览器一起工作

Inline SVG with use tag stopped working with recent browsers

html

svg

inline

href