SVG 使用标签不渲染渐变 Firefox答案

【问题标题】：The SVG use tag not rendering gradients FirefoxSVG 使用标签不渲染渐变 Firefox
【发布时间】：2015-11-19 14:16:29
【问题描述】：

我有一个在 SVG 中构建的 javascript 应用程序（类似 CAD），其中包含 tools（使用 Inkscape 在 SVG 中构建的对象），并插入了 use 标记。在 Chrome 和 Safari 上一切正常（从未在 IE 中测试过），但在 Firefox 中，fill 带有渐变的所有对象都没有呈现。如下图：

火狐

铬

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

<use 
  id="SvgjsUse1448" 
  xmlns:xlink="http://www.w3.org/1999/xlink" 
  xlink:href="assets/images/neomap/tools/armchair.svg#armchair">
</use>

渐变在html 页面内的单独svg 中定义

...
<linearGradient xmlns="http://www.w3.org/2000/svg" id="armchair_SVGID_1_" y2="1911.6" gradientUnits="userSpaceOnUse" x2="1201.2" gradientTransform="matrix(1.0799475,0,0,1.2039969,15.269894,2.997636)" y1="467.91" x1="1201.7">

并像这样申请

<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 的错误？我该如何解决？

【问题讨论】：

符号中是否定义了渐变？如果是这样，请不要。
@RobertLongson，我用你的疑问更新了这个问题，我尝试使用symbol，g，甚至整个svg，都在其他浏览器上工作，除了Firefox。

标签： firefox svg

【解决方案1】：

这是您依赖的 Chrome/Safari 错误。

url(#armchair_SVGID_1_);

实际上是

的简写

url(<this file>#armchair_SVGID_1_);

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

什么是基本 URI 的定义在 RFC3986 第 5 节中说

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

有一个note in the CSS specification 指的是这个，我认为它做出了更清晰的陈述（至少对于 CSS，因为这是 CSS 规范）：

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

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

Webkit 浏览器会出错。有this bug for the CSS stylesheets case of this issue。

使用绝对url或将渐变放在使用文件中（但不在符号部分）。

【讨论】：

但在 Chrome 中一切正常，只是 Firefox 不会呈现这个。并且渐变被加载到 html 中。
不幸的是，仅仅因为它恰好做了你想做的事情并不能使它成为按照适当规范做的正确事情。

【解决方案2】：

我遇到了类似的问题，结果证明我的问题是一个真正的边缘案例，所以我在这里发布我的解决方案，以帮助其他人。

我的目标是定义一组图标，以便以后在文档中重复使用。我已将图标定义为 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>

我在文档的其他地方这样使用：

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

为了防止大量图标引用在屏幕上呈现，我应用了以下样式：

#icons {
  display: none;
}

这导致了对 linearGradients 的 url 引用停止工作。浏览器可能会因为 display: none 或类似的效果而将它们从 DOM 树中删除。

解决方案是改变样式：

#icons {
  height: 0;
}

【讨论】：

谢谢！这正是我的情况。
即使父母申请display: none，它也会破坏svg中的任何链接！

【解决方案3】：

这确实是一个 Chrome/Safari 错误。我发现，如果您从 linearGradient 元素的 ID 中删除所有连字符，问题就会消失。就那么简单。然后 SVG 也可以与组一起使用 ()。如果这对某人有帮助，我会很高兴...

【讨论】：

不适用于 Chrome 93...

【解决方案4】：

对于 SVG <symbol> 元素，Firefox 的行为是正确的 according to the spec。对于 SVG，任何嵌套在 <symbol> 元素或 <defs> 元素中的元素都不会直接使用 CSS 渲染，即使使用 <use> 元素也是如此。只有他们的属性是。您正在使用样式属性，它是 <symbol> 元素内的 CSS。

您必须直接使用 SVG fill 属性才能使其在 <symbol> 元素中工作。即使您使用的是 SVG <use> 元素。它使用 CSS 样式属性引用 SVG <symbol> 元素内的 SVG 图形元素，不会根据规范呈现，因为 CSS 显示属性甚至不适用于 SVG <symbol> 元素。

这不是 Firefox 中的错误，Firefox 遵循规范，而使用 webkit 的 Chrome 和 Safari 暂时不遵循规范并允许这样做。但他们很快就会遵循 SVG 规范。

查看这些参考资料和规范：

W3C <symbol> 规范：http://www.w3.org/TR/SVG11/struct.html#SymbolElement

‘symbol’元素永远不会直接渲染；它们的唯一用途是作为可以使用‘use’元素引用的东西。 ‘display’ 属性不适用于 ‘symbol’ 元素；因此，即使 'display' 属性设置为 none 以外的值，'symbol' 元素也不会直接呈现，并且即使 'symbol' 元素上的 'display' 属性或任何其祖先的数量设置为无。

MDN Firefox <symbol> 元素参考：https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol

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

规范指出<symbol> 元素内的 SVG 元素不会直接呈现。在这种情况下，您需要在 <symbol> 元素或 <defs> 元素中更改这些元素的实际属性。因此，只需在 <symbol> 元素内的那些元素上更改 SVG fill 属性即可。

【讨论】：

【解决方案5】：

好的，这是一个错误，也是 W3 规范的一种解释。在this section 中指定了两种IRI local 和non-local。

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

非本地 IRI 引用，其中 IRI 引用确实包含 <absoluteIRI> 或 <relativeIRI>，因此表示对当前文档中的元素的引用。

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

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

因此，我为每个 SVG 工具创建了两个文件，一个用于 Firefox，一个用于其他浏览器。现在出现了另一个问题，对于 g 元素中的低值 transform: scale() 或小的 SVG 元素，渐变会消失（透明），我认为这是一个错误。

【讨论】：

不，这是一个错误。 Chrome 开发人员接受这是一个错误。当前文档是 armchair.svg 文件时，找不到 linearGradient 元素。
如果您发现了其他 Firefox 错误，请通过bugzilla报告它们
对不起@RobertLongson，但您的评论没有太多内容可以否决我的答案，即使它对我有用。如果你不想帮忙，就说“是个bug”，忽略这个。
我的答案是基于 W3 规范的，抱歉，你凭空捏造你的答案（至少放一些链接来验证你所说的话），并否决我的答案，因为我只是公开了 W3 中定义的内容规格！有一个类似 bugzilla.mozilla.org/show_bug.cgi?id=353575 的 bugzilla 于 2006 年开放，但尚未解决，抱歉，我不买这个！
这是一个不同的错误。您的标记中没有作为符号元素的子元素的 linearGradient 元素。