SVG: màu của bóng

Question

Tôi muốn viết một hình chữ nhật đơn giản với một bóng màu đỏ trong SVG. Tôi có một bộ lọc đơn giản:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1012" height="400"> 
    <title>svg arrow with dropshadow</title> 
    <desc>An svg example of an arrow shape with a dropshadow filter applied. The dropshadow filter effect uses feGaussianBlur, feOffset and feMerge.</desc> 
    <defs> 
    <filter id="dropshadow" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> 
    <feComponentTransfer in="SourceAlpha"> 
     <feFuncR type="discrete" tableValues="1"/> 
     <feFuncG type="discrete" tableValues="0"/> 
     <feFuncB type="discrete" tableValues="0"/> 
    </feComponentTransfer> 
    <feGaussianBlur stdDeviation="2"/> 
    <feOffset dx="0" dy="0" result="shadow"/> 
    <feComposite in="SourceGraphic" in2="shadow" operator="over"/> 
    </filter> 
    </defs> 
    <rect rx="2" ry="2" fill="rgb(255,255,255)" x="5.25" y="5.25" width="141" height="50" fill-opacity="0.85" filter="url(#dropshadow)"> 
</svg> 

Tại sao màu bóng này không phải là màu đỏ? Đâu tệ?

Answer 1

1. Bạn đã cung cấp SVG không hợp lệ - bạn cần đóng phần tử <rect> của mình.

2. Ví dụ của bạn (cố định) hiển thị bóng đỏ cho tôi trong Chrome. Đây là những gì this URL trông giống như đối với tôi với Chrome v15:

   

gì OS/trình duyệt/phiên bản là bạn nhìn thấy kết quả khác nhau với ai?

Chỉnh sửa: Trong Firefox v7 Tôi thấy tất cả màu xám, và trong Safari v5, tôi không thấy hiệu ứng đổ bóng nào cả. Câu trả lời của bạn, rất có thể là, chỉ đơn giản là bạn đang thử nghiệm trong một trình duyệt/phiên bản với sự hỗ trợ không đầy đủ của đặc tả bộ lọc SVG.

Answer 2

Đối với những người tìm kiếm một giải pháp chung, điều này làm việc cho tôi bên trong một phần tử:

<feGaussianBlur in="SourceAlpha" stdDeviation="1.7" result="blur"/> 
<feOffset in="blur" dx="3" dy="3" result="offsetBlur"/> 
<feFlood flood-color="#3D4574" flood-opacity="0.5" result="offsetColor"/> 
<feComposite in="offsetColor" in2="offsetBlur" operator="in" result="offsetBlur"/>