2013-05-11 3 views
0

Недавно я начал выполнять некоторую работу с svg и наткнулся на идею фильтров svg. Однако вскоре я понял, что эта функциональность не поддерживается, например, 9.Альтернативные варианты фильтров svg, т. Е. 9

Кто-нибудь знает какую-либо технику возврата, которую я могу применить, чтобы у меня были подобные визуальные эффекты для тех, которые поддерживаются фильтрами svg?

В основном я хочу применить к элементу пути фильтры, такие как тень, размытие и т. Д. Я думал, что я мог бы сделать это с помощью CSS3, но мне кажется, что CSS 3 не полностью применимо на SVG элемент

ответ

0

Попробуйте http://www.html5canvastutorials.com/advanced/html5-canvas-shadow-offset-tutorial/

<!DOCTYPE HTML> 
 
<html> 
 

 
<head> 
 
    <style> 
 
    body { 
 
     margin: 0px; 
 
     padding: 0px; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <canvas id="myCanvas" width="578" height="200"></canvas> 
 
    <script> 
 
    var canvas = document.getElementById('myCanvas'); 
 
    var context = canvas.getContext('2d'); 
 

 
    context.rect(188, 40, 200, 100); 
 
    context.fillStyle = 'red'; 
 
    context.shadowColor = '#999'; 
 
    context.shadowBlur = 20; 
 
    context.shadowOffsetX = 15; 
 
    context.shadowOffsetY = 15; 
 
    context.fill(); 
 
    </script> 
 
</body> 
 

 
</html>

+0

Я знаю, что ie9 поддерживает холст, однако мы используем svg, а не холст. – ppoliani

0

Посмотрите на raphaeljs. http://raphaeljs.com. Вы можете расширить его или использовать текущие расширения для фильтрации в IE