使用textPath的SVG不在Firefox中呈現的符號

-2

在符號中使用textPath不會在Firefox中呈現。它在最新的Chrome和IE中呈現良好，但是當我嘗試引用符號時，svg文本不會在Firefox（37.0.1）中呈現 - 第一個框顯示爲空。使用下面的代碼（無外部依賴關係），應該有兩個框，其中每個中心垂直流動單詞Test。使用textPath的SVG不在Firefox中呈現的符號

編輯︰我原本以爲這個問題以某種方式涉及Flexbox佈局，直到Paul指出即使沒有flexbox佈局存在的問題。

的HTML是：

<div> 
    <svg id="not_working" viewBox="0 0 250 1200" preserveAspectRatio="xMidYMid meet"> 
     <symbol id="test_symbol1" preserveAspectRatio="xMidYMid meet" viewBox="0 0 250 1200"> 
      <path id="test_symbol_path" d="M 100 1200 L 100 0" /> 
      <text font-size="100" fill="red"> 
       <textPath text-anchor="middle" startoffset="50%" xlink:href="#test_symbol_path">Test</textPath> 
      </text> 
     </symbol> 
     <use xlink:href="#test_symbol1" /> 
    </svg> 
    <svg viewBox="0 0 250 1200" preserveAspectRatio="xMidYMid meet"> 
     <path id="test_text" d="M 100 1200 L 100 0" /> 
     <text font-size="100" fill="green"> 
      <textPath text-anchor="middle" startoffset="50%" xlink:href="#test_text">Test</textPath> 
     </text> 
    </svg> 
</div>

而CSS是：

div { 
    height:200px; 
    width: 200px; 
    display: flex; 
    flex:1; 
    flex-direction: row; 
    border: 1px solid red; 
} 
svg { 
    border: 1px solid black; 
    flex-grow: 0; 
    flex-shrink: 1; 
    flex-basis: 50%; 
}

JS提琴here。

來源

2015-04-14 Gerrat