Firefox上的SVG渲染問題

我們設計了一個9片縮放SVG，以在我們的Web應用程序中用作容器背景。它能夠在最新版本的Chrome，Edge，Opera甚至IE 11上完美呈現。但是我們在Firefox上遇到渲染問題（在版本40 & 42上測試過）。Firefox上的SVG渲染問題

下面是SVG代碼：http://jsfiddle.net/0g5sjuyv/

但這裏是它是如何呈現在Firefox上：

正如你可以看到，右側和底部邊緣沒有顯示在所有。首先，我認爲應用面膜有問題，但沒有（編輯：看起來有IS）。然後，我想也許Firefox不支持直接在<use>元素上應用變換，但它似乎也不是這個問題的原因。

請將此事告訴我們，我將不勝感激。

來源

2015-11-03 SepehrM

如果我刪除了掩碼，那麼行* *在FF中出現在我身上。只是指出問題出在那裏：http://jsfiddle.net/9g01z2u3/ – Duopixel

謝謝@Duopixel你是對的，我錯過了。看來Firefox對SVG掩碼有其自己的規則。任何想法如何適應它，以便它適用於所有現代瀏覽器？我最初從http://w3.eleqtriq.com/2014/03/the-holy-grail-of-image-scaling/ – SepehrM

得到這種方法的想法沒有詳細查看，但它可能是[this]（ https://bugzilla.mozilla.org/show_bug.cgi?id=537623） –

感謝@Duopixel和@RobertLongson，經過數小時的努力，我終於想出了一個可行的解決方案。它似乎能夠在所有現代瀏覽器上正確呈現。它需要清理。

<?xml version="1.0" encoding="utf-8" ?> 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <style type="text/css"> 
     .mask { 
     fill: white; 
     stroke: black; 
     stroke-width: 100px; 
     } 

     .fl { 
     fill: #01A7CC; 
     } 
    </style> 
    <defs> 
     <mask id="mask-left-right"> 
      <rect class="mask" width="300px" height="100%" x="-100px" /> 
     </mask> 
     <mask id="mask-right"> 
      <g> 
       <svg x="-100%"> 
        <rect class="mask" width="300px" height="100%" x="-100px" transform="scale(-1,1)" /> 
       </svg> 
      </g> 
     </mask> 
     <mask id="mask-top-bottom"> 
      <rect class="mask" width="100%" height="300px" y="-100px" /> 
     </mask> 
     <mask id="mask-bottom"> 
      <g> 
       <svg y="-100%"> 
        <rect class="mask" width="100%" height="300px" y="-100px" transform="scale(1,-1)" /> 
       </svg> 
      </g> 
     </mask> 
     <mask id="mask-center"> 
      <rect class="mask" width="100%" height="100%" /> 
     </mask> 
     <symbol id="bottomLeft" viewBox="0 0 200 200"> 
      <path class="fl" d="M0,150v45c0,2.8,2.3,5,5,5l45.3,0l0-2H17.7v-3l-10.8,0c-2.7,0-4.9-1.2-4.9-3.9V150L0,150z" /> 
     </symbol> 
     <symbol id="bottom"> 
      <rect class="fl" x="50" y="0" width="100%" height="2" /> 
     </symbol> 
     <symbol id="right"> 
      <rect class="fl" x="0" y="50" width="2" height="100%" /> 
     </symbol> 
     <symbol id="topRight" viewBox="0 0 200 200"> 
      <polygon class="fl" points="200,50 200,45.4 154.6,0 150,0 150,2 152.5,2 198,47.5 198,50 " /> 
     </symbol> 
     <symbol id="bottomRight" viewBox="0 0 200 200"> 
      <path class="fl" d="M198,150l0,25.3l0,11.5c0,2.7-2.2,4.9-4.9,4.9h-4.3v2.3c0,2.7-1.2,3-3.9,3l-34.9,0l0,3h14.6h4.4h17.5c2.8,0,4-1.3,4-4.1v-2.4h4.5c2.8,0,5-2.3,5-5l0-11.7l0-26.8L198,150z" /> 
     </symbol> 
    </defs> 
    <!-- top-left corner: --> 
    <path class="fl" d="M50.3,0H5C2.3,0,0,2.3,0,5v45l2,0V8.9C2,6.2,4.2,5,6.9,5h43.3L50.3,0z" /> 

    <!-- bottom-left corner: --> 
    <g transform="scale(1, -1)"> 
     <svg x="0" y="-100%"> 
      <use xlink:href="#bottomLeft" width="200" height="200" y="-200" transform="scale(1, -1)" /> 
     </svg> 
    </g> 

    <!-- top-right corner: --> 
    <g transform="scale(-1, 1)"> 
     <svg x="-100%" y="0"> 
      <use xlink:href="#topRight" width="200" height="200" x="-200" transform="scale(-1, 1)" /> 
     </svg> 
    </g> 

    <!-- bottom-right corner: --> 
    <g transform="scale(-1, -1)"> 
     <svg x="-100%" y="-100%"> 
      <use xlink:href="#bottomRight" width="200" height="200" y="-200" x="-200" transform="scale(-1, -1)" /> 
     </svg> 
    </g> 

    <!-- top edge: --> 
    <rect class="fl" x="50.2" y="0" width="100%" height="2" mask="url(#mask-top-bottom)" /> 
    <!-- bottom edge: --> 
    <rect class="fl" width="100%" height="2" y="-100%" mask="url(#mask-bottom)" transform="scale(1,-1)" /> 
    <!-- right edge: --> 
    <rect class="fl" height="100%" width="2" x="-100%" mask="url(#mask-right)" transform="scale(-1,1)" /> 
    <!-- left edge: --> 
    <rect class="fl" width="2" height="100%" mask="url(#mask-left-right)" /> 
</svg>

來源

2015-11-04 12:16:17 SepehrM

Firefox上的SVG渲染問題

回答

相關問題