SVG使用标记不渲染渐变Firefox

Posted 2021-03-30

我有一个在SVG中构建的javascript应用程序（类似CAD），它使用tools标签插入use（使用Inkscape在SVG中构建的对象）。一切都在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>

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

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

答案

这是您依赖的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是样式表的URI，而不是源文档的URI。

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

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

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

另一答案

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

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

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

请参阅这些参考和规范：

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

“符号”元素永远不会直接呈现;它们的唯一用途是可以使用'use'元素引用的东西。 'display'属性不适用于'symbol'元素;因此，即使'display'属性设置为none以外的值，也不会直接呈现'symbol'元素，并且'symbol'元素可用于引用，即使'symbol'元素上的'display'属性或任何它的祖先没有。

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

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

规范声明<symbol>元素内的SVG元素不直接呈现。在这种情况下，您需要更改<symbol>元素或<defs>元素中这些元素的实际属性。因此，只需更改SVG fill属性，而不是更改<symbol>元素内的元素。

另一答案

这真的是一个Chrome / Safari漏洞。我想，如果从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>

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

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

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

#icons {
  display: none;
}

这导致了对linearGradients的url引用停止工作。由于display：none或某些此类效果，浏览器可能会将它们从DOM树中删除。

解决方案是改变风格：

#icons {
  height: 0;
}

另一答案

好的，这是一个错误，但也是W3 Spec的解释。在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，另一个用于其他浏览器。现在出现了另一个问题，对于transform: scale()元素中g的低值，或者小的SVG元素，渐变消失（透明），我相信这是一个错误。