SVG-текст выглядит по-разному в Chrome по сравнению с IE8

Я пытаюсь стилизовать текст для главной страницы моей компании. Текст отлично выглядит в IE8, но не выглядит так хорошо в Firefox или Chrome.SVG-текст выглядит по-разному в Chrome по сравнению с 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 и использовал font-shadow для firefox/chrome и небольшой фильтр Glow для IE. Это устраняет мою проблему для всех основных браузеров.

источник

2011-01-28 21:21:34 KClough

Если вы установили цвет хода так же, как и заливку, он скроет небольшую потерю визуализации.

Вы должны знать, что IE использует собственный векторный движок визуализации, называемый VML, а не SVG. Рафаэль отлично справляется с тем, чтобы скрыть большинство различий для вас, но не для всех. Средство визуализации VML имеет ряд ошибок, худший из которых для вашего использования заключается в том, что IE7 игнорирует указанное семейство шрифтов и всегда использует Arial.

источник

2011-01-28 16:18:49 leebriggs

Проблема заключается в том, что этот текст будет использоваться на фоне изображения, поэтому штрих действительно необходим, чтобы помочь выделить текст. – KClough

Вы также можете использовать ширину штриха, чтобы расширить его, и таким образом покрыть цвет заливки. – leebriggs

Я не использовал SVG через некоторое время, но этот код даже не выглядит корректным для SVG. Не должно быть объявлено пространство имен? Не уверен в HTML5, но это все равно не работает в IE. Таким образом, возможно, поэтому в современных браузерах это выглядит не очень хорошо, потому что это не правильный SVG в первую очередь! – Rob

SVG-текст выглядит по-разному в Chrome по сравнению с IE8

ответ

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