Текстовые тени и масштабирование

Question

Я пытаюсь применить текстовые тени для текста svg, но это неслучайно для firefox и chrome, но я не уверен, почему. Я пытаюсь использовать их для создания границы вокруг текста.

Вот мой jsfiddle: http://jsfiddle.net/f3m8Z/

А вот CSS я использую для текста:

text-shadow: 0px -1px 5px red,  
    0px 1px 5px red,  
    -1px 0px 5px red,  
    1px 0px 5px red,  
    -1px -1px 5px red, 
    -1px 1px 5px red,  
    1px -1px 5px red,  
    1px 1px 5px red; 

В Chrome, если увеличивать и некоторые из миров Привет имеют более толстый контур и если я его перетаскиваю, он останется за текстом (если вы сначала увеличите масштаб, а затем перетащите).

В Firefox только верхний Hello World имеет некоторую тень (и это на самом деле не заметно), но я читал, что Firefox поддерживает текстовые тени.

Является ли проблема, потому что текст является svg, а не фактическим текстом, и если это так, это обходное решение для этого?

Благодаря

Answer 1

SVG текст делает not support text-shadow. Хорошей новостью является то, что это то, что, вероятно, будет добавлено в SVG 2, и поэтому оно будет поддерживаться в какой-то момент в будущем.

Один обходной путь будет использовать <foreignObject> вставлять HTML текст, но это не будет работать в IE9 или IE10, как ни поддерживает <foreignObject>

Answer 2

Если вы просто хотите создать границу вокруг текста, вы можете просто применить удар. Недостатком является то, что он будет посягать на заполнение текста. Но путь вокруг этого будет заключаться в наложении двух копий текста. У одного внизу был красный ход, а передний - без удара.

Это решение не так чисто, как тень CSS, но оно позволит достичь желаемого эффекта.