numOctaves
Baseline
åºãå©ç¨å¯è½
ãã®æ©è½ã¯åºãå®è£ ããã¦ãããå¤ãã®ãã¼ã¸ã§ã³ã®ç«¯æ«ããã©ã¦ã¶ã¼ã§åä½ãã¾ãã2020å¹´1æ以éããã¹ã¦ã®ãã©ã¦ã¶ã¼ã§å©ç¨å¯è½ã§ãã
numOctaves å±æ§ã¯ã<feTurbulence> ããªããã£ãã®ãã¤ãºé¢æ°ã«ããããªã¯ã¿ã¼ãã®æ°ãå®ç¾©ãã¾ãã
ãªã¯ã¿ã¼ãã¨ã¯ãå¨æ³¢æ°ã¨æ¯å¹ ã«ãã£ã¦å®ç¾©ããããã¤ãºé¢æ°ã§ããä¹±æµã¯ãå¨æ³¢æ°ãå¾ã ã«ä¸ããæ¯å¹ ãå¾ã ã«ä¸ãã¦ããè¤æ°ã®ãªã¯ã¿ã¼ããç©ã¿éãããã¨ã§å½¢æããã¾ãã ãªã¯ã¿ã¼ãã®æ°ãå¤ãã»ã©ããã¤ãºã¯ããèªç¶ã«è¦ãã¾ãããã ãããªã¯ã¿ã¼ãã®æ°ãå¢å ããã¨åæã«è¨ç®éãè¦æ±ããããããããã©ã¼ãã³ã¹ã«æªå½±é¿ãåã¼ãã¾ãã
ãã®å±æ§ã¯ã次㮠SVG è¦ç´ ã§ä½¿ç¨ãããã¨ãã§ãã¾ãã
ä¾
ä¾ 1
<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
<filter id="noise1" x="0" y="0" width="100%" height="100%">
<feTurbulence baseFrequency="0.025" numOctaves="1" />
</filter>
<filter id="noise2" x="0" y="0" width="100%" height="100%">
<feTurbulence baseFrequency="0.025" numOctaves="3" />
</filter>
<rect x="0" y="0" width="200" height="200" filter="url(#noise1)" />
<rect x="220" y="0" width="200" height="200" filter="url(#noise2)" />
</svg>
ä¾ 2
<svg
width="200"
height="200"
viewBox="0 0 220 220"
xmlns="http://www.w3.org/2000/svg">
<filter id="displacementFilter">
<feTurbulence baseFrequency="0.05" numOctaves="3" 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>
使ç¨ä¸ã®ã¡ã¢
| å¤ | <integer> |
|---|---|
| ããã©ã«ãå¤ | 1 |
| ã¢ãã¡ã¼ã·ã§ã³ | å¯ |
<integer>-
ãªã¯ã¿ã¼ãã®æ°å¤ãå®ç¾©ãã¾ããè² ã®å¤ã¯æå®ã§ãã¾ããã
ä»æ§æ¸
| ä»æ§æ¸ |
|---|
| Filter Effects Module Level 1 # element-attrdef-feturbulence-numoctaves |