Chrome에서 SVG 텍스트가 IE8과 다른 모양으로 보입니다.

회사 홈페이지의 일부 텍스트를 양식화하려고합니다. IE8에서는 텍스트가 멋지지만 파이어 폭스 또는 크롬에서는 잘 보이지 않습니다.Chrome에서 SVG 텍스트가 IE8과 다른 모양으로 보입니다.

파이어 폭스에서는 각 문자 오른쪽에 몇 개의 여분의 흰색 픽셀이있는 것처럼 보입니다. 크롬에서는 효과가 비슷하지만 모든 문자에 적용되는 것은 아닙니다.

Firefox
IE8
Chrome

나는 라파엘 1.5.2을 사용하고 있습니다 :

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <script src="js/raphael-min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     window.onload = function() {              
      var paper = Raphael(10, 0, 600, 400); 

      var lbl = paper.text(135, 40, "AaEeIiOoUuYy").attr({ 
       "font" : '36px Franklin Gothic Medium, Helvetica, Arial',      
       stroke : "#000", 
       fill : '#ffffff', 
       'font-weight' : 'bold', 
       'text-anchor' : 'start', 
       'stroke-opacity' : .9    
      }); 
      var lbl = paper.text(0, 90, "AaEeIiOoUuYy").attr({ 
       "font" : '62px Franklin Gothic Medium, Helvetica, Arial',  
       stroke : "#000", 
       fill : '#ffffff',  
       'font-weight' : 'bold',    
       'text-anchor' : 'start', 
       'stroke-opacity' : .9 
      }); 
     }  
    </script> 
    <style type="text/css"> 
     #page 
     {   
      background: #000; 
      width:100%;   
      height: 600px; 
     } 
    </style> 
</head> 
<body>  
    <div id="page"> 
    </div> 
</body> 
</html>

다음은 문제를 보여주는 이미지입니다. 감사!

편집 :

나는 또한 나를 얇은 블랙 아웃 (스트로크)에 특정 글꼴을 표시 할 수 있습니다 다른 크로스 브라우저 솔루션 열려있어.

출처

2011-01-28 KClough

나는 그래피 파를 버리고 firefox/chrome에 font-shadow를 사용하고 IE에는 약간의 Glow 필터를 사용했다. 이 모든 주요 브라우저에 대한 내 문제를 해결합니다.

출처

2011-01-28 21:21:34 KClough

획 색상을 채우기와 동일하게 설정하면 약간의 렌더링 오류가 숨겨집니다.

IE는 SVG가 아닌 VML이라는 자체 벡터 렌더링 엔진을 사용한다는 것을 명심해야합니다. 라파엘 (Raphael)은 여러분 모두를 위해서가 아니라 대부분의 차이를 감추고 있습니다. VML 렌더러에는 여러 가지 버그가 있습니다. IE7이 지정된 글꼴 모음을 무시하고 항상 Arial을 사용한다는 것이 가장 나쁜 버그입니다.

출처

2011-01-28 16:18:49 leebriggs

이 텍스트는 이미지 배경에 사용되므로 텍스트가 눈에 잘 띄도록 스트로크가 실제로 필요합니다. – KClough

스트로크 너비를 사용하여 넓히고 그런 식으로 채움 색상을 커버 할 수도 있습니다. – leebriggs

잠시 동안 SVG를 사용하지는 않았지만 코드가 SVG에 맞게 보이지 않습니다. 네임 스페이스를 선언해야합니까? HTML5에서는 확실하지 않지만 어쨌든 IE에서는 작동하지 않습니다. 어쩌면 현대적인 브라우저에서는 SVG가 적합하지 않기 때문에 어쩌면 잘 보일 것입니다! – Rob

Chrome에서 SVG 텍스트가 IE8과 다른 모양으로 보입니다.

답변

관련 문제