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
Comments
Post a Comment