Question

在符号中使用textPath不会在Firefox中呈现。它在最新的Chrome和IE中渲染得很好，但是当我尝试引用符号时，svg文本无法在Firefox（37.0.1）中呈现 - 第一个框显示为空。使用下面的代码（没有外部依赖关系），应该有两个框，其中单词Test在每个框的中心垂直流动。

编辑我最初认为此问题涉及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。

Answer 1

我认为它与flexbox没有任何关系。即使您不使用flexbox，<textPath>元素也不会呈现。

请参阅：https://jsfiddle.net/x7ydw2df/7/

它似乎与textPath在符号中有关。请在Mozilla报告您的发现是一个错误。

https://bugzilla.mozilla.org/enter_bug.cgi?product=Core&component=SVG

SVG使用textPath在Firefox中不呈现的符号

1 个答案: