Firefox 在 svg 中显示 tspan 文本，不透明度为 0（与所有其他现代浏览器不同）

Question

我来自这个链接，遇到了使用velocity.js 制作 svg 动画时 IE 崩溃的问题。

我意识到，天哪，firefox 实际上是在这个 jsbin 中渲染不透明度为 0 的 svg 文本。

用firefox 36转载

解决方法、修复？

SVG

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   width="949.574px" height="625.847px" viewBox="0 0 949.574 625.847" enable-background="new 0 0 949.574 625.847"
   xml:space="preserve">

<g>
  <g>
    <g>
      <path fill="#C4C6C8" d="M30.5,60.993c-5.386,0-10.703-1.446-15.376-4.184c-0.455-0.266-0.608-0.853-0.342-1.308
        c0.267-0.456,0.854-0.608,1.309-0.342c4.38,2.565,9.362,3.921,14.409,3.921c5.048,0,10.03-1.356,14.408-3.922
        c0.455-0.268,1.042-0.114,1.309,0.343c0.267,0.455,0.114,1.041-0.342,1.308C41.204,59.547,35.888,60.993,30.5,60.993z"/>
      <path fill="#C4C6C8" d="M9.55,52.259c-0.245,0-0.49-0.095-0.678-0.282C3.15,46.219,0,38.592,0,30.498
        c0-8.092,3.15-15.721,8.871-21.479c0.373-0.375,0.979-0.376,1.353-0.005c0.375,0.372,0.377,0.978,0.005,1.352
        c-5.363,5.399-8.316,12.55-8.316,20.133c0,7.585,2.953,14.733,8.316,20.131c0.372,0.375,0.37,0.979-0.004,1.353
        C10.037,52.166,9.794,52.259,9.55,52.259z"/>
      <path fill="#C4C6C8" d="M15.608,5.965c-0.328,0-0.648-0.168-0.826-0.473c-0.267-0.455-0.114-1.041,0.342-1.308
        C19.797,1.446,25.114,0,30.5,0s10.703,1.446,15.376,4.185c0.456,0.267,0.608,0.853,0.341,1.308
        c-0.267,0.456-0.853,0.61-1.308,0.343C40.528,3.269,35.546,1.912,30.5,1.912c-5.047,0-10.029,1.356-14.409,3.923
        C15.938,5.924,15.772,5.965,15.608,5.965z"/>
      <path fill="#C4C6C8" d="M51.449,52.259c-0.243,0-0.487-0.093-0.674-0.277c-0.375-0.373-0.377-0.978-0.005-1.353
        c5.363-5.396,8.316-12.546,8.316-20.131c0-7.584-2.953-14.733-8.315-20.133c-0.372-0.374-0.37-0.979,0.005-1.352
        c0.373-0.373,0.979-0.371,1.352,0.005C57.849,14.777,61,22.405,61,30.498c0,8.094-3.151,15.722-8.872,21.479
        C51.941,52.164,51.695,52.259,51.449,52.259z"/>
    </g>
    <polygon fill="#FFFFFF" points="30.5,44.277 16.5,23.028 30.5,23.028 44.5,23.028     "/>
  </g>

  <text transform="matrix(1 0 0 1 75 47.875)" fill="#FFFFFF" font-family="'AgfaRotisSansSerif'" font-size="36">f
  </text>
  <text transform="matrix(1 0 0 1 75 224.875)">
  <tspan class="tanim1 animated" style="opacity:0" x="0" y="0" fill="#FFFFFF"       font-size="36">e
  </tspan>
  <tspan class="tanim2 animated" style="opacity:0" x="0" y="86.4" fill="#FFFFFF"    font-size="36">d
  </tspan>
  <tspan class="tanim3 animated" style="opacity:0" x="0" y="172.8" fill="#FFFFFF"    font-size="36">c
  </tspan>
  <tspan class="tanim4 animated" style="opacity:0" x="0" y="252" fill="#FFFFFF"      font-size="30">b
  </tspan>
  <tspan class="tanim5 animated" style="opacity:0" x="0" y="288" fill="#FFFFFF"  font-size="30">a
  </tspan>
  <tspan class="tanim6 animated" style="opacity:0" x="0" y="324" fill="#FFFFFF"  font-size="30">z
  </tspan>
  <tspan class="tanim7 animated" style="opacity:0" x="0" y="360" fill="#FFFFFF" font-size="30">y
  </tspan>
  <tspan class="tanim8 animated" style="opacity:0" x="0" y="396" fill="#FFFFFF" font-size="30">x
  </tspan>
  </text>

  <line class="toBeAnimatedLine1 animated" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" x1="29" y1="70" x2="29" y2="70"></line>
  <line class="toBeAnimatedLine2 animated" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" x1="30" y1="212" x2="30" y2="212"/>
  <line class="toBeAnimatedLine3 animated" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" x1="30" y1="298" x2="30" y2="298"/>
  <line class="toBeAnimatedLine4 animated" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" x1="30" y1="385" x2="30" y2="385"/>
  <line class="toBeAnimatedLine5 animated" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" x1="30" y1="468" x2="30" y2="468"/>
</g>
</svg>

Answer 1

我实际上用过

fill-opacity

http://jsbin.com/xoyalegipo/2/edit

 <tspan  fill-opacity="0.5" x="0" y="324" fill="#FFFFFF"  font-size="30">z
  </tspan>

这在 IE 中不起作用，甚至 11 所以如果是 ie，那么样式不透明度 别的 填充不透明度

...

Answer 2

我刚刚遇到了同样的问题，并通过使用

visibility:hidden

（和

visibility:visible

）来解决它。不透明度方面的主要区别在于隐藏元素不会对事件做出反应，例如单击它们。

Answer 3

不透明度始终仅限于容器元素和图形元素。

• 在 SVG 1.1 中，tspan 和 textPath 不是图形元素。

• 在 SVG 2 中它们是。

Firefox 与其他浏览器一样已经过渡到 SVG2，并且 bug 1751025 通过支持 tspan 和 textPath 元素的不透明度来继续这一过程。它可以从 Firefox 114 开始使用。

即便如此，填充不透明度和描边不透明度总是比不透明度更快，所以如果你可以使用它们，你应该使用它们。