ChromeでSVGのテキストがIE8と違って見える

私の会社のホームページのテキストを整形しようとしています。このテキストはIE8では素晴らしいようですが、FirefoxやChromeではうまく見えません。ChromeでSVGのテキストがIE8と違って見える

Firefoxでは、各文字の右側に余分な白いピクセルがいくつかあるようです。クロムの効果は似ていますが、すべての文字には適用されません。ここで

<!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>

問題を示すイメージである：

Firefox
IE8
Chrome

私はラファエル1.5.2を使用しています。ありがとう！

EDIT：

私はまた、私は細い黒のアウトライン（ストローク）で特定のフォントを表示することができ、他のクロスブラウザソリューションに開いています。

出典

2011-01-28 KClough

私は、raphaelをディッチし、firefox/chromeのfont-shadowとIEのためのわずかなGlowフィルタを使い果たしました。これは、すべての主要なブラウザで私の問題を解決します。

出典

2011-01-28 21:21:34 KClough

ストロークの色を塗りと同じに設定すると、わずかなレンダリングエラーが隠されます。

IEは、SVGではなくVMLという独自のベクターレンダリングエンジンを使用していることに注意してください。ラファエルはあなたのための違いのほとんどを隠す素晴らしい仕事をしますが、すべてではありません。 VMLレンダラーにはいくつかのバグがありますが、IE7が指定されたフォントファミリを無視して常にArialを使用するという点で、最悪のバグがあります。

出典

2011-01-28 16:18:49 leebriggs

このテキストは画像の背景に使用されるため、文字が目立つようにするにはストロークが本当に必要です。 – KClough

また、stroke-widthを使用して幅を広げ、塗りの色をそのようにカバーすることもできます。 – leebriggs

私はSVGをしばらく使用していませんが、コードはSVGには正しく表示されません。名前空間を宣言する必要はありませんか？とにかくHTML5ではわかりませんが、それはIEではうまくいきません。だから、おそらく、現代のブラウザではうまく見えないのは、最初は適切なSVGではないからです！ – Rob

ChromeでSVGのテキストがIE8と違って見える

答えて

関連する問題