css - SVG using textPath a symbol not rendering in Firefox -

using textpath within symbol doesn't render in firefox. renders fine in latest chrome , ie, when try reference symbol, svg text doesn't render in firefox (37.0.1) - first box appears empty. code below (no external dependencies), there should 2 boxes word test flowing vertically in centre of each.

edit: thought issue somehow involved flexbox layout, until paul pointed out issue exists without flexbox layout.

the html is:

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

and css is:

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 fiddle here.

i don't think has flexbox. <textpath> element doesn't render if don't use flexbox.

see: https://jsfiddle.net/x7ydw2df/7/

it seems related textpath being in symbol. please report discovery bug @ mozilla.

https://bugzilla.mozilla.org/enter_bug.cgi?product=core&component=svg