텍스트 그림자 및 확대/축소

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;

내가와 헬로 월드의 일부를 확대하거나 축소하는 경우가 두꺼운 윤곽이 그리고 주위에 드래그하면 텍스트 뒤에 놓입니다 (먼저 확대 한 다음 드래그하면됩니다).

파이어 폭스에서는 맨 위의 Hello World 만 약간의 그림자가 있지만 (실제로 눈에 띄지는 않습니다) 파이어 폭스는 텍스트 그림자를 지원합니다.

텍스트가 svg이고 실제 텍스트가 아니기 때문에 문제가 되는가?이 경우 해결 방법이 있습니까?

감사

출처

2013-07-18 user1698555

SVG 필터를 사용하여 SVG 텍스트에 그림자를 적용 할 수도 있습니다 –

SVG 텍스트는 not support text-shadow 않습니다. 좋은 소식은 이것이 아마도 SVG 2에 추가 될 것이므로 향후 어느 시점에서 지원 될 것이라고합니다.

한 가지 해결 방법은 HTML 텍스트를 포함 할 <foreignObject>을 사용하는 것입니다,하지만 둘은 <foreignObject>

출처

2013-07-18 18:30:34

을 지원하지 않기 때문에 그냥 텍스트 둥근 테두리를 만들려면 그 IE9에서 작동 또는 IE10하지 않습니다, 당신은 단지 적용 할 수 뇌졸중. 단점은 텍스트 채우기가 침해된다는 것입니다. 그러나 그것의 주위에 원본의 2 개의 사본을 겹쳐 쌓는 것이 방법 일 것입니다. 밑에있는 것은 빨간 스트로크이고 앞의 스트로크는 스트로크가 없습니다.

이 솔루션은 CSS 그림자처럼 깨끗하지는 않지만 원하는 효과를 얻을 수 있습니다.

출처

2013-07-19 18:25:48

텍스트 그림자 및 확대/축소

답변

관련 문제