SVG на IE не делает правильно

У меня есть этот SVG, созданный на JSFiddle: http://jsfiddle.net/nirmaljpatel/wtq9ocwp/SVG на IE не делает правильно

Я пытаюсь получить изогнутые тексты, размещенные на круговых дуг, указав дугообразных <path> элементы <textpath> s

<text font-size="18" font-family="Georgia" font-weight="bold" font-style="italic" fill="white"> 
    <textPath xlink:href="#txtHdr" font-size="20" startOffset="50%" text-anchor="middle" dominant-baseline="central" fill="#484848">Types of People</textPath> 
    <a href="#"> 
     <textPath xlink:href="#txt1" startOffset="50%" text-anchor="middle" dominant-baseline="text-after-edge">Technical</textPath> 
     <textPath xlink:href="#txt1" startOffset="50%" text-anchor="middle" dominant-baseline="text-before-edge">Knowledge</textPath> 
    </a> 
    <a href="#"> 
     <textPath xlink:href="#txt2" startOffset="50%" text-anchor="middle" dominant-baseline="central">Programmer</textPath> 
    </a> 
    <a href="#"> 
     <textPath xlink:href="#txt3" startOffset="50%" text-anchor="middle" dominant-baseline="central">Debugger</textPath> 
    </a> 
    <a href="#"> 
     <textPath xlink:href="#txt4" startOffset="50%" text-anchor="middle" dominant-baseline="central">A Tester</textPath> 
    </a> 
</text> 
<text font-size="18" font-family="Georgia" font-weight="bold" font-style="italic" fill="#c97"> 
    <tspan x="0" y="0" text-anchor="middle" dominant-baseline="text-after-edge">The</tspan> 
    <tspan x="0" y="0" text-anchor="middle" dominant-baseline="text-before-edge">Master</tspan> 
</text>

Это делает правильно на Chrome.

Screenshot of SVG Rendered on Chrome

Однако то же самое на IE отображает все элементы <text> неправильно. Screenshot of SVG Rendered on IE11

Любые идеи о том, как заставить эту работу работать с IE? Я использую IE11.

Добавление следующего тега meta, предложенного в некоторых других ответах, не помогло.

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

источник

2015-01-15 Nirmal Patel

Информация о поддержке IE для атрибута dominant-baseline довольно неоднозначна.

С одной стороны, это выглядит как IE supports the attribute.

С другой стороны, none of the attribute values seem to be supported.

Следуя this answer, советую установить явно значение y.

Это обеспечивает поддержку всех основных браузеров.

Ваш обновленный код будет выглядеть следующим образом

<text font-size="18" font-family="Georgia" font-weight="bold" font-style="italic" fill="#c97"> 
    <tspan x="0" y="0" text-anchor="middle">The</tspan> 
    <tspan x="0" y="20" text-anchor="middle">Master</tspan> 
</text>

Проверьте updated demo.

Надеюсь, это поможет.

источник

2015-01-15 14:09:33

Спасибо ... что определенно работает для '' элементов ... но, похоже, не влияет на элементы «». –

@NirmalPatel Вы уже пытались установить явные координаты на элементе 'text' ? –

Yup ... http://jsfiddle.net/nirmaljpatel/wtq9ocwp/15/ –

SVG на IE не делает правильно

ответ

Смежные вопросы