result
result å±æ§ã¯ããã®ãã£ã«ã¿ã¼ããªããã£ãã«å²ãå½ã¦ãããååãå®ç¾©ãã¾ãããã®å±æ§ãæå®ããã¦ããå ´åããã®ãã£ã«ã¿ã¼ããªããã£ãã®å¦ççµæã§ããã°ã©ãã£ãã¯ã¹ã¯ãåã <filter> è¦ç´ å
ã®å¾ç¶ã®ãã£ã«ã¿ã¼ããªããã£ãã® in å±æ§ã«ãã£ã¦åç
§ãããã¨ãã§ãã¾ããå¤ãæå®ããã¦ããªãå ´åããã®åºåã¯ã次ã®ãã£ã«ã¿ã¼ããªããã£ãã in å±æ§ã«å¤ãæå®ãã¦ããªãå ´åã«éãã次ã®ãã£ã«ã¿ã¼ããªããã£ãã¸ã®æé»çãªå
¥åã¨ãã¦åå©ç¨å¯è½ã¨ãªãã¾ãã
ãã®å±æ§ã¯ã以ä¸ã® SVG è¦ç´ ã§ä½¿ç¨ãããã¨ãã§ãã¾ãã
ä¾
<svg viewBox="0 0 220 220" xmlns="http://www.w3.org/2000/svg">
<filter id="displacementFilter">
<feTurbulence
type="turbulence"
baseFrequency="0.05"
numOctaves="2"
result="turbulence" />
<feDisplacementMap
in2="turbulence"
in="SourceGraphic"
scale="50"
xChannelSelector="R"
yChannelSelector="G" />
</filter>
<circle cx="100" cy="100" r="100" filter="url(#displacementFilter)" />
</svg>
使ç¨ã¡ã¢
| å¤ | <filter-primitive-reference> |
|---|---|
| ããã©ã«ãå¤ | ãªã |
| ã¢ãã¡ã¼ã·ã§ã³ | å¯ |
<filter-primitive-reference>-
ãã®å¤ã¯
<custom-ident>ã§ããããã£ã«ã¿ã¼ããªããã£ãã®ååãå®ç¾©ãã¾ããããã¯ãæå®ããã<filter>è¦ç´ å ã§ã®ã¿æå³ãæã¡ããããã£ã¦ãã¼ã«ã«ã¹ã³ã¼ãã®ã¿ãæã¡ã¾ããåã<filter-primitive-reference>ããåã<filter>è¦ç´ å ã«è¤æ°åç¾ãããã¨ã¯è¨±å®¹ããã¾ããåç §ãããå ´åããã®å¤ã¯ãæå®ãããçµæãæã¤ãç´åã«ããæãè¿ããã£ã«ã¿ã¼ããªããã£ãã使ç¨ãã¾ãã
ä»æ§æ¸
| ä»æ§æ¸ |
|---|
| Filter Effects Module Level 1 # element-attrdef-filter-primitive-result |