Css3 kullanarak SVG gölge

SORU

22 Mayıs 2011, Pazar

Css3 kullanarak SVG gölge

Svg eleman css3 , gibi bir şey kullanmak için gölge ayarlamak mümkün

box-shadow: -5px -5px 5px #888;-webkit-box-shadow: -5px -5px 5px #888;

Gölge Filtre Efektleri oluşturma ile ilgili bazı açıklamalar gördüm. Yalnız css kullanarak bir örnek var. Aşağıda cusor tarzı doğru uygulanmış, ancak hiçbir gölge etkisi olduğu bir çalışma kodudur. Lütfen benimle az bit gölge efekti elde etmek için yardımcı olur.

========= ============== Kod

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE HTML><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head> 
<style type="text/css" media="screen">  
    svg .shadow { cursor:crosshair; 
            -moz-box-shadow: -5px -5px 5px #888;
            -webkit-box-shadow: -5px -5px 5px #888;
            box-shadow: -5px -5px 5px #888; }   
</style>
</head>
<body>
<meta http-equiv="content-type" content="application/xhtml xml; charset=utf-8" />
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full"  viewBox="0 0 120 70">  
        <rect class="shadow" x="10" y="10" width="100" height="50" fill="#c66" />
</svg>
</body>
</html>

CEVAP

23 Mayıs 2011, PAZARTESİ

İşte bazı svg kullanarak dropshadow uygulama example bir 'filtre' özelliği. Eğer kontrol etmek isterseniz dropshadow donukluk this example bir göz at. slope öznitelik ne kadar opaklık dropshadow vermek için kontrol eder.

Örnek: ilgili bitten

<filter id="dropshadow" height="130%">
  <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> <!-- stdDeviation is how much to blur -->
  <feOffset dx="2" dy="2" result="offsetblur"/> <!-- how much to offset -->
  <feMerge> 
    <feMergeNode/> <!-- this contains the offset blurred image -->
    <feMergeNode in="SourceGraphic"/> <!-- this contains the element that the filter is applied to -->
  </feMerge>
</filter>
<circle r="10" style="filter:url(#dropshadow)"/>

Svg dikdörtgenler biraz daha etkileyici olsa da. Box-shadow CSS kutuları üzerinde çalışmak için tanımlanır (okuma: dikdörtgenler), SVG Primer SVG filtreleri ile neler yapabileceğiniz hakkında biraz daha bilgi edinmek için okuyun.

Bunu Paylaş: