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渲染问题

回答

相关问题