Firefox SVG使用标记不呈现渐变

我有一个javascript应用程序（类似CAD）内置在SVG中，它有

工具
（使用Inkscape在SVG中构建对象），并插入
使用
标记。在Chrome和Safari上一切都很好（从未在IE中测试过），但在Firefox中，所有用渐变填充的对象都没有渲染。如下图所示：

火狐

铬

工具
是这样加载的（使用外部文件）



然后像这样申请

<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:dc="http://purl.org/dc/elements/1.1/" height="100%" width="100%" version="1.1" >
  <defs>
    <symbol id="armchair" viewBox="0 0 72000 54000">

       <path style="stroke:#000000;stroke-width:6.84171867;stroke-miterlimit:10;fill:url(#armchair_SVGID_1_);" d="m2234.8,743.7s168.9,1406.4,0,1487.4c-188.77,90.42-1655.6,92.708-1844.3-0.4817-168.8-83.316,0-1488.9,0-1488.9v-182.09h1841l3.2398,184.09z"/>
       ...
    </symbol>
  </defs>
</svg>


...

这是Firefox上的一个bug？我该如何解决呢？
这是您所依赖的Chrome/Safari bug

url(#armchair_SVGID_1_);

实际上是

url(<this file>#armchair_SVGID_1_);

url（#扶手椅#SVGID#u 1#）；

但是armchair.svg文件中没有渐变

基本URI的定义见第5节，其中

在某些媒体类型中，可以使用相对引用的基本URI
嵌入到内容本身中，以便易于获取
通过解析器

我认为有一种说法更清楚地提到了这一点（至少对于CSS来说，因为这是CSS规范）：

对于CSS样式表，基本URI是样式表的URI，而不是源文档的URI

文件armchair.svg定义了一个基本URI，与任何svg文档或CSS样式表一样，它是用于访问它的绝对URL

Webkit浏览器会出错。有一个

使用绝对url或将渐变放在使用文件中（但不放在符号部分）。
好的，这是一个错误，但也是W3规范的一种解释。在中指定了两种类型的IRI
local
，和
non-local

本地IRI引用，其中IRI引用不包含or，因此仅包含片段标识符

非本地IRI引用，其中IRI引用确实包含
或
，因此表示对当前文档中某个元素的引用

我看到的是，Chrome/Safari在处理规范时更加灵活，允许
本地IRI
引用当前文档中不存在的外部文档

关键是，Chrome/Safari不会呈现位于同一外部文件中的外部SVG文件（通过引用加载，在
use
标记中加载）的渐变，仅当渐变加载到当前主html/xml
文档中时

因此，我为每个SVG工具创建了两个文件，一个用于Firefox，另一个用于其他浏览器。现在又出现了另一个问题，对于
transform:scale（）
在
g
元素或小SVG元素中的低值，渐变消失（透明），我认为这是一个bug。
Firefox在SVG
元素中运行正常。对于SVG，嵌套在
元素或
元素中的任何元素都不会直接用CSS呈现，即使是
元素。只有它们的属性是。您正在使用style属性，它是
元素中的CSS

必须直接使用SVG
fill
属性，才能使其在
元素中工作。即使您使用的是SVG
元素。它使用CSS样式属性引用SVG
元素中的SVG图形元素，该属性不会根据规范进行渲染，因为CSS显示属性甚至不适用于SVG
元素

这在Firefox中不是一个bug，Firefox遵守该规范，而使用webkit的Chrome和Safari则不遵守该规范，并且现在允许它。但它们很快就会遵循SVG规范

请参见以下参考和规范：

W3C
规范：

“符号”元素从不直接渲染它们的唯一用途是作为可以使用“use”元素引用的内容。“显示”属性不适用于“符号”元素；因此，即使“display”属性设置为none以外的值，“symbol”元素也不会直接呈现，即使“symbol”元素或其任何祖先的“display”属性设置为none，“symbol”元素也可用于引用

MDN Firefox
元素参考：

符号元素用于定义可由元素实例化的图形模板对象。在同一文档中多次使用的图形中使用符号元素增加了结构和语义。结构丰富的文档可以以图形方式呈现，如语音或盲文，从而提高可访问性请注意，符号元素本身不会被渲染。仅呈现符号元素的实例（即元素对符号的引用）

该规范规定
元素中的SVG元素不会直接呈现。在这种情况下，您需要更改
元素或
元素中这些元素的实际属性。因此，只需在
元素中的那些元素上更改SVG
fill
属性。
这实际上是一个Chrome/Safari bug。
我发现，如果从linearGradient元素的ID中删除所有连字符，问题就会消失。就这么简单。SVG也可以用于组（）。
如果这对某人有帮助，我会很高兴…
我也遇到了类似的问题，结果证明我的问题是一个真正的边缘案例，所以我在这里发布我的解决方案是为了其他人的利益

我的目标是定义一组图标，以便以后在文档中重用。我已经将图标定义为
defs
元素中的嵌套svg文档：

<svg id="icons">
  <defs>

    <g id="atom-icon">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
        <defs>
          <linearGradient id="atom-41-a" x1="50%" x2="50%" y1="3.961%" y2="100%">
            <stop offset="0%" stop-color="#FDFDFD"/>
            <stop offset="100%" stop-color="#CBCBCB"/>
          </linearGradient>
          <linearGradient id="atom-41-b" x1="50%" x2="50%" y1="3.961%" y2="100%">
            <stop offset="0%" stop-color="#B2E198"/>
            <stop offset="100%" stop-color="#04A171"/>
          </linearGradient>
        </defs>
        <g fill="none">
          <circle cx="128" cy="128" r="127.858" fill="url(#atom-41-a)"/>
          <circle cx="127.858" cy="128.142" r="116.907" fill="url(#atom-41-b)"/>
          <path fill="#F2F8F6" d="M100.453 110.097a221.783 221.783 0 0 0-3.988 6.382 164.44 164.44 0 0 1-3.684-11.377c3.73-.535 7.695-.957 11.874-1.249a224.886 224.886 0 0 0-4.202 6.244zm103.138 7.475c-4.132-3.967-10.04-7.602-17.558-10.804-14.926-6.356-34.918-10.474-56.295-11.595a234.82 234.82 0 0 0-7.529-.277C138.53 75.415 154.292 65.05 163.472 64.7c1.944-.074 3.576.31 4.854 1.141 4.296 2.792 5.488 11.453 3.189 23.166a4.267 4.267 0 0 0 8.373 1.644c3.953-20.137-1.576-28.497-6.911-31.965-2.785-1.81-6.093-2.655-9.83-2.513-14.12.536-33.904 15.592-51.956 38.803-7.148.247-14.038.864-20.483 1.827a106.106 106.106 0 0 1-1.625-9.522c-1.619-13.344.367-22.816 5.312-25.337.794-.405 1.662-.639 2.654-.713 4.418-.332 10.652 2.637 17.542 8.359a4.267 4.267 0 0 0 5.452-6.565c-8.85-7.35-16.8-10.817-23.633-10.303-2.112.158-4.095.703-5.892 1.62-4.593 2.342-7.732 6.828-9.33 13.331-1.368 5.57-1.562 12.513-.576 20.636.39 3.213.96 6.556 1.695 9.998-5.04 1.062-9.71 2.356-13.897 3.869-18.316 6.616-22.544 15.337-22.866 21.488-.308 5.876 2.7 14.62 18.775 22.91a4.267 4.267 0 0 0 3.911-7.583c-9.247-4.77-14.41-10.193-14.165-14.88.346-6.605 11.417-13.596 30.274-17.535 1.747 6.309 3.99 12.861 6.68 19.505-6.777 12.723-11.722 25.262-14.286 36.416-1.833 7.97-2.369 14.89-1.592 20.567.906 6.63 3.558 11.418 7.881 14.228 2.205 1.433 5.176 2.553 9.079 2.553 5.658 0 13.275-2.357 23.343-9.538a4.267 4.267 0 1 0-4.955-6.948c-9.925 7.08-18.454 9.613-22.816 6.778-4.652-3.023-5.633-12.642-2.624-25.728 1.995-8.678 5.555-18.296 10.383-28.21a220.995 220.995 0 0 0 3.283 6.731c9.717 19.087 21.612 35.694 33.494 46.762 5.984 5.573 11.708 9.497 17.011 11.663 3.218 1.314 6.24 1.971 9.045 1.971 2.596 0 5.008-.563 7.216-1.69 4.43-2.259 7.511-6.52 9.157-12.665 1.41-5.263 1.726-11.827.942-19.512-1.543-15.11-7.253-33.539-16.077-51.891a4.267 4.267 0 0 0-7.69 3.697c8.407 17.485 13.833 34.908 15.278 49.06 1.27 12.447-.78 21.31-5.486 23.71-4.942 2.52-13.756-1.438-23.58-10.588-11.17-10.404-22.43-26.168-31.706-44.388a210.555 210.555 0 0 1-5.851-12.483 210.936 210.936 0 0 1 7.143-11.836 213.301 213.301 0 0 1 7.877-11.333c.7-.01 1.405-.017 2.115-.019 3.664-.012 7.592.09 11.688.305 20.404 1.07 39.368 4.95 53.399 10.925 12.34 5.256 19.534 11.704 19.244 17.25-.246 4.708-5.967 9.575-15.696 13.352a4.267 4.267 0 0 0 3.088 7.955c16.905-6.563 20.821-14.967 21.13-20.861.27-5.151-2.04-10.111-6.865-14.743v.001z"/>
          <path fill="#F1F8F3" d="M119.194 129.133c0 5.153 4.174 9.33 9.323 9.33s9.323-4.177 9.323-9.33c0-5.154-4.174-9.331-9.323-9.331s-9.323 4.177-9.323 9.33"/>
        </g>
      </svg>
    </g>

  </defs>
</svg>

这导致对linearGradients的url引用停止工作。可能是因为display:none或som，浏览器从DOM树中删除了它们
url(<this file>#armchair_SVGID_1_);

<svg id="icons">
  <defs>

    <g id="atom-icon">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
        <defs>
          <linearGradient id="atom-41-a" x1="50%" x2="50%" y1="3.961%" y2="100%">
            <stop offset="0%" stop-color="#FDFDFD"/>
            <stop offset="100%" stop-color="#CBCBCB"/>
          </linearGradient>
          <linearGradient id="atom-41-b" x1="50%" x2="50%" y1="3.961%" y2="100%">
            <stop offset="0%" stop-color="#B2E198"/>
            <stop offset="100%" stop-color="#04A171"/>
          </linearGradient>
        </defs>
        <g fill="none">
          <circle cx="128" cy="128" r="127.858" fill="url(#atom-41-a)"/>
          <circle cx="127.858" cy="128.142" r="116.907" fill="url(#atom-41-b)"/>
          <path fill="#F2F8F6" d="M100.453 110.097a221.783 221.783 0 0 0-3.988 6.382 164.44 164.44 0 0 1-3.684-11.377c3.73-.535 7.695-.957 11.874-1.249a224.886 224.886 0 0 0-4.202 6.244zm103.138 7.475c-4.132-3.967-10.04-7.602-17.558-10.804-14.926-6.356-34.918-10.474-56.295-11.595a234.82 234.82 0 0 0-7.529-.277C138.53 75.415 154.292 65.05 163.472 64.7c1.944-.074 3.576.31 4.854 1.141 4.296 2.792 5.488 11.453 3.189 23.166a4.267 4.267 0 0 0 8.373 1.644c3.953-20.137-1.576-28.497-6.911-31.965-2.785-1.81-6.093-2.655-9.83-2.513-14.12.536-33.904 15.592-51.956 38.803-7.148.247-14.038.864-20.483 1.827a106.106 106.106 0 0 1-1.625-9.522c-1.619-13.344.367-22.816 5.312-25.337.794-.405 1.662-.639 2.654-.713 4.418-.332 10.652 2.637 17.542 8.359a4.267 4.267 0 0 0 5.452-6.565c-8.85-7.35-16.8-10.817-23.633-10.303-2.112.158-4.095.703-5.892 1.62-4.593 2.342-7.732 6.828-9.33 13.331-1.368 5.57-1.562 12.513-.576 20.636.39 3.213.96 6.556 1.695 9.998-5.04 1.062-9.71 2.356-13.897 3.869-18.316 6.616-22.544 15.337-22.866 21.488-.308 5.876 2.7 14.62 18.775 22.91a4.267 4.267 0 0 0 3.911-7.583c-9.247-4.77-14.41-10.193-14.165-14.88.346-6.605 11.417-13.596 30.274-17.535 1.747 6.309 3.99 12.861 6.68 19.505-6.777 12.723-11.722 25.262-14.286 36.416-1.833 7.97-2.369 14.89-1.592 20.567.906 6.63 3.558 11.418 7.881 14.228 2.205 1.433 5.176 2.553 9.079 2.553 5.658 0 13.275-2.357 23.343-9.538a4.267 4.267 0 1 0-4.955-6.948c-9.925 7.08-18.454 9.613-22.816 6.778-4.652-3.023-5.633-12.642-2.624-25.728 1.995-8.678 5.555-18.296 10.383-28.21a220.995 220.995 0 0 0 3.283 6.731c9.717 19.087 21.612 35.694 33.494 46.762 5.984 5.573 11.708 9.497 17.011 11.663 3.218 1.314 6.24 1.971 9.045 1.971 2.596 0 5.008-.563 7.216-1.69 4.43-2.259 7.511-6.52 9.157-12.665 1.41-5.263 1.726-11.827.942-19.512-1.543-15.11-7.253-33.539-16.077-51.891a4.267 4.267 0 0 0-7.69 3.697c8.407 17.485 13.833 34.908 15.278 49.06 1.27 12.447-.78 21.31-5.486 23.71-4.942 2.52-13.756-1.438-23.58-10.588-11.17-10.404-22.43-26.168-31.706-44.388a210.555 210.555 0 0 1-5.851-12.483 210.936 210.936 0 0 1 7.143-11.836 213.301 213.301 0 0 1 7.877-11.333c.7-.01 1.405-.017 2.115-.019 3.664-.012 7.592.09 11.688.305 20.404 1.07 39.368 4.95 53.399 10.925 12.34 5.256 19.534 11.704 19.244 17.25-.246 4.708-5.967 9.575-15.696 13.352a4.267 4.267 0 0 0 3.088 7.955c16.905-6.563 20.821-14.967 21.13-20.861.27-5.151-2.04-10.111-6.865-14.743v.001z"/>
          <path fill="#F1F8F3" d="M119.194 129.133c0 5.153 4.174 9.33 9.323 9.33s9.323-4.177 9.323-9.33c0-5.154-4.174-9.331-9.323-9.331s-9.323 4.177-9.323 9.33"/>
        </g>
      </svg>
    </g>

  </defs>
</svg>

<li title="Atom">
  <svg><use xlink:href="#atom-icon"/></svg>
</li>

#icons {
  display: none;
}

#icons {
  height: 0;
}