SVG : 그림자의 색

SVG에 빨간 그림자가있는 간단한 사각형을 쓰고 싶습니다.SVG : 그림자의 색

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

왜이 예 그림자 색상으로 빨간색되지 않습니다 : 나는 간단한 필터가? 내 나쁜 짓은 어디 있니?

출처

2011-11-01 Oleg Ignatov

http://dev.opera.com/articles/view/svg-evolution-3-applying-polish/ ? page = 2 프리미티브 필터 이미지를 실제 이미지와 오버레이하여 촬영할 수 있습니다. 나는 그런 식으로 사용했다. – Kris

잘못된 SVG를 제공했습니다. <rect> 요소를 닫아야합니다.
귀하의 예 (고정)는 Chrome에서 나를 위해 빨간색 그림자를 보여줍니다. 여기 this URL가 크롬 V15과 나를 위해 어떻게 표시되는지를 보여줍니다 :

어떤 OS/브라우저/버전

은 당신이 다른 결과를보고있다?

편집 : Firefox v7에서는 모든 회색조를 볼 수 있으며 Safari v5에서는 그림자 효과가 전혀 표시되지 않습니다. 당신의 대답은 SVG 필터 사양의 불완전한 지원이있는 브라우저/버전에서 테스트하고 있다는 것입니다. 일반적인 솔루션을 찾고 사람들을 위해

출처

2011-11-01 21:30:02 Phrogz

Safari는 버전 6까지 필터를 지원하지 않았습니다. http://caniuse.com/#feat=svg-filters를 참조하십시오. –

http://www.w3.org/TR/SVG11/filters.html#SourceAlpha로 인해 빨간색이 생성되지 않는다고 가정합니다. SourceAlpha -> 암시 적 검정색 (# 000) + 알파. 'in = "SourceAlpha"'를'in = "SourceGraphic"'으로 대체하면 Opera와 Chrome에서 작동합니다. –

Firefox의 문제점은 단일 값으로 이산 feFunc를 처리하지 않는 버그가 있었기 때문입니다. 예를 들어 두 값을 사용하여 해결할 수 있습니다. tableValues = "1 1". 이것은 약 18 개월 전에 고쳐졌습니다. –

는, 이것은 요소 내부 나를 위해 일한 :

<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"/>

출처

2014-09-12 23:25:21

나는이 feFlood와 fecomposite로 꽤 좋은 결과를 얻었습니다. – crapthings

SVG : 그림자의 색

답변

관련 문제