SVG 使用标记不呈现渐变 Firefox [英] The SVG use tag not rendering gradients Firefox

问题描述

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

I have a javascript app (CAD like) build in SVG that have tools (objects build in SVG with Inkscape) that are inserted with the use tag. Everything works fine on Chrome and Safari (never tested in IE), but in Firefox, all objects that fill with gradients did not render. Like image below:

工具是这样加载的(使用外部文件)

The tools are loaded like this (using external files)

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

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

The gradients are defined in a separate svg inside the html page

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

It's a bug on Firefox? How can I workaround?

推荐答案

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

I had a similar problem and it turned out that mine was a real edge case, so I'm posting my solution here for the benefit of others.

>

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

My goal was to define a set of icons for later reuse in the document. I had defined the icons as nested svg documents inside a defs element:

<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>

我在文档的其他地方使用过，如下所示:

Which I used elsewhere in the document like so:

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

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

In order to prevent the big list of icons references from rendering on screen, I had applied the following styles:

#icons {
  display: none;
}

这会导致对 linearGradients 的 url 引用停止工作.浏览器可能因为显示而将它们从 DOM 树中删除:无或某些此类效果.

This caused, of all things, the url references to linearGradients to stop working. Probably the browsers removed them from the DOM tree because of display: none or some such effect.

解决方案是改变样式:

#icons {
  height: 0;
}

这篇关于SVG 使用标记不呈现渐变 Firefox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！