<feDropShadow>
Baseline
åºãå©ç¨å¯è½
ãã®æ©è½ã¯åºãå®è£ ããã¦ãããå¤ãã®ãã¼ã¸ã§ã³ã®ç«¯æ«ããã©ã¦ã¶ã¼ã§åä½ãã¾ãã2020å¹´1æ以éããã¹ã¦ã®ãã©ã¦ã¶ã¼ã§å©ç¨å¯è½ã§ãã
<feDropShadow> 㯠SVG ã®ãã£ã«ã¿ã¼ããªããã£ãã§ãå
¥åç»åã®ããããã·ã£ãã¦ãä½æãã¾ããããã¯ã<filter> è¦ç´ å
ã§ã®ã¿ä½¿ç¨ã§ãã¾ãã
ã¡ã¢:
ããããã·ã£ãã¦ã®è²ã¨éæ度ã¯ãflood-color ããã³ flood-opacity ã¨ãããã¬ã¼ã³ãã¼ã·ã§ã³å±æ§ã使ç¨ãã¦å¤æ´ã§ãã¾ãã
ä»ã®ãã£ã«ã¿ã¼ããªããã£ãã¨åæ§ã«ãããã©ã«ã㧠linearRGB è²ç©ºéã®è²æåãå¦çãã¾ããcolor-interpolation-filters ã使ç¨ãããã¨ã§ã代ããã« sRGB ã使ç¨ãããã¨ãå¯è½ã§ãã
使ç¨ã³ã³ããã¹ã
å±æ§
dx: ãã®å±æ§ã¯ããããã·ã£ãã¦ã® x ãªãã»ãããå®ç¾©ãã¾ãã å¤ã®å: <number>; ããã©ã«ãå¤:2; ã¢ãã¡ã¼ã·ã§ã³: å¯dy: ãã®å±æ§ã¯ããããã·ã£ãã¦ã® y ãªãã»ãããå®ç¾©ãã¾ãã å¤ã®å: <number>; ããã©ã«ãå¤:2; ã¢ãã¡ã¼ã·ã§ã³: å¯instdDeviation: ãã®å±æ§ã¯ãããããã·ã£ãã¦ã®ã¼ããå¦çã«ãããæ¨æºåå·®ãå®ç¾©ãã¾ãã å¤ã®å: <number-optional-number>; ããã©ã«ãå¤:2; ã¢ãã¡ã¼ã·ã§ã³: å¯- ãã£ã«ã¿ã¼ããªããã£ãå±æ§:
x,y,width,height,result
DOM ã¤ã³ã¿ã¼ãã§ã¤ã¹
ãã®è¦ç´ 㯠SVGFEDropShadowElement ã¤ã³ã¿ã¼ãã§ã¤ã¹ãå®è£
ãã¦ãã¾ãã
ä¾
<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="shadow">
<feDropShadow dx="0.2" dy="0.4" stdDeviation="0.2" />
</filter>
<filter id="shadow2">
<feDropShadow dx="0" dy="0" stdDeviation="0.5" flood-color="cyan" />
</filter>
<filter id="shadow3">
<feDropShadow
dx="-0.8"
dy="-0.8"
stdDeviation="0"
flood-color="pink"
flood-opacity="0.5" />
</filter>
</defs>
<circle cx="5" cy="50%" r="4" fill="pink" filter="url(#shadow)" />
<circle cx="15" cy="50%" r="4" fill="pink" filter="url(#shadow2)" />
<circle cx="25" cy="50%" r="4" fill="pink" filter="url(#shadow3)" />
</svg>
ä»æ§æ¸
| ä»æ§æ¸ |
|---|
| Filter Effects Module Level 1 # feDropShadowElement |
ãã©ã¦ã¶ã¼ã®äºææ§
é¢é£æ å ±
- SVG ãã£ã«ã¿ã¼ããªããã£ãå±æ§ãä¾ãã°
height,in,result,x,y,width - SVG ãã¬ã¼ã³ãã¼ã·ã§ã³å±æ§ãä¾ãã°
flood-color,flood-opacity.