璇ユ枃绔犲凡缁忚鐨勭壒鍒粏鑷翠簡锛岃绡囦粎浠ユ璁板綍鍔ㄦ晥杩囩▼涓悇鐐圭殑璁＄畻銆?/p>
1.feDisplacementMap
feDisplacementMap 瀹為檯涓婃槸涓€涓綅缃浛鎹㈡护闀滐紝灏辨槸鏀瑰彉鍏冪礌鍜屽浘褰㈢殑鍍忕礌浣嶇疆鐨勩€傞亶鍘嗗師鍥惧舰鐨勬墍鏈夊儚绱犵偣锛屼娇鐢?code>feDisplacementMap閲嶆柊鏄犲皠鏇挎崲涓€涓柊鐨勪綅缃紝褰㈡垚涓€涓柊鐨勫浘褰€?code>feDisplacementMap婊ら暅鍦ㄤ笟鐣岀殑涓绘祦搴旂敤鏄鍥惧舰杩涜褰㈠彉锛屾壄鏇诧紝娑插寲銆?/p>
P'(x,y) ← P( x + scale * (XC(x,y) - 0.5), y + scale * (YC(x,y) - 0.5))
· P'(x,y)鎸囩殑鏄浆鎹箣鍚庣殑x, y鍧愭爣銆?br />
· x + scale * (XC(x,y) - 0.5), y + scale * (YC(x,y) - 0.5)鎸囩殑鏄叿浣撶殑杞崲瑙勫垯銆?br />
· XC(x,y)琛ㄧず褰撳墠x,y鍧愭爣鍍忕礌鐐瑰叾X杞存柟鍚戜笂璁剧疆鐨勫搴旈€氶亾鐨勮绠楀€硷紝鑼冨洿鏄?~1銆?br />
· YC(x,y)琛ㄧず褰撳墠x,y鍧愭爣鍍忕礌鐐瑰叾Y杞存柟鍚戜笂璁剧疆鐨勫搴旈€氶亾鐨勮绠楀€硷紝鑼冨洿鏄?~1銆?br />
· -0.5鏄亸绉诲€硷紝鍥犳XC(x,y) - 0.5鑼冨洿鏄?code>-0.5~0.5锛?code>YC(x,y) - 0.5鑼冨洿涔熸槸-0.5~0.5銆?br />
· scale琛ㄧず璁＄畻鍚庣殑鍋忕Щ鍊肩浉涔樼殑姣斾緥锛?code>scale瓒婂ぇ锛屽垯鍋忕Щ瓒婂ぇ銆?/p>
鍐嶇敤涓€鍙ヨ瘽瑙ｉ噴灏辨槸锛屾牴鎹瀹氱殑閫氶亾棰滆壊瀵瑰師鍥剧殑x, y鍧愭爣杩涜鍋忕Щ銆?/p>
| 鍊?/th>
| 榛樿鍊?/th>
| 鍙栧€?/th>
| 璇存槑 |
| xChannelSelector |
A |
A or R or G or B |
瀵瑰簲XC(x,y),琛ㄧずX杞村潗鏍囦娇鐢ㄧ殑鏄摢涓鑹查€氶亾杩涜浣嶇疆鍋忕Щ |
| yChannelSelector |
A |
A or R or G or B |
瀵瑰簲YC(x,y),琛ㄧずY杞村潗鏍囦娇鐢ㄧ殑鏄摢涓鑹查€氶亾杩涜浣嶇疆鍋忕Щ |
| color-interpolation-filters |
linearRGB |
linearRGB or sRGB |
婊ら暅瀵归鑹茶繘琛岃绠楁椂鍊欓噰鐢ㄧ殑棰滆壊妯″紡绫诲瀷 |
| scale |
0 |
鍙鍙礋 |
缂╂斁姣斾緥 閫氬父浣跨敤姝ｆ暟鍊煎鐞嗭紝鍊艰秺澶э紝鍋忕Щ瓒婂ぇ銆?/td>
|
| in |
SourceGraphic |
SourceGraphic锛孲ourceAlpha锛孊ackgroundImage, BackgroundAlpha锛孎illPaint锛孲trokePaint锛屼互鍙婅嚜瀹氫箟鐨勬护闀滅殑鍘熷寮曠敤 |
鍘熷鍥惧舰 |
| in2 |
鍏冪礌鐨剅esult灞炴€у€?/feimage> |
鍚宨n |
鐢ㄦ潵鏄犲皠鐨勫浘褰?/td>
|
2.閫氳繃feDisplacementMap鍜宖eImage瀹炵幇姘存尝鐗规晥
瀹炵幇姘存尝鏁堟灉閫氬父浣跨敤涓嬪浘
<svg id='svg' width="400" height="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="filter-ripple" primitiveUnits='objectBoundingBox'>
<feImage id='feImage' result="pict2" xlink:href="涓婅堪鍥剧墖鍦板潃" x="0" y="0" width="100%" height="100%"></feImage>
<feDisplacementMap id='displacement-map' result='ok' scale="0" xChannelSelector="R" yChannelSelector="G" in2="pict2" in="SourceGraphic" color-interpolation-filters="sRGB"></feDisplacementMap>
<feComposite operator="in" in2="pict2"></feComposite>
<feComposite in2="SourceGraphic"></feComposite> //杩欎釜鐨勭洰鐨勬槸鍥犱负娣诲姞婊ら暅鐨勫厓绱犲彲瑙佸尯鍩熷拰feImage鍏冪礌鐨勫ぇ灏忎竴鑷淬€傝瀺鍚堝師鏈夊厓绱犱繚璇佹暣涓厓绱犻兘鍙
</filter>
</defs>
</svg>
姘存尝鐗规晥锛屾槸閫氳繃<feImage>鏍囩 x,y,width,height鍥涗釜灞炴€у拰<feDisplacementMap>鏍囩scale鍔ㄦ€佸彉鍖栧疄鐜般€?br />
灏卞儚娑熸吉锛屼互鐭冲瓙鎺夎惤澶勪负涓績锛岃寖鍥寸敱灏忔墿澶э紝璧蜂紡鐢卞己鍑忓急銆?杞负浠ｇ爜锛屼篃灏辨槸width,height鐢卞皬鍙樺ぇ锛?code>scale鐢卞ぇ鍙樺皬
鏍规嵁鐐瑰嚮浜嬩欢锛屽彲浠ヨ绠楀嚭涓績鍧愭爣锛坧ointX锛宲ointY锛?/code>
鍦ㄦ墿鏁ｈ繃绋嬩腑锛屼腑蹇冨潗鏍囦笉鍙橈紝x锛寉涓哄浘鐗囩殑璧峰鍧愭爣
pointX = width/2 + x ;pointY = height/2 + y => x = pointX - width/2; y = pointY - height/2
width锛宧eight锛宻cale鐨勬渶澶у€煎氨鍙互鏍规嵁闇€姹傛潵璁剧疆鍟
鍙傝€冭祫鏂?/h3>
https://www.zhangxinxu.com/wordpress/2017/12/understand-svg-fedisplacementmap-filter/
鍒版杩欑瘒鍏充簬浣跨敤feDisplacementMap+feImage婊ら暅瀹炵幇姘存尝绾规晥鏋?璁＄畻鍔ㄦ€佸€?鐨勬枃绔犲氨浠嬬粛鍒拌繖浜?鏇村鐩稿叧feDisplacementMap婊ら暅姘存尝绾瑰唴瀹硅鎼滅储鑴氭湰涔嬪浠ュ墠鐨勬枃绔犳垨缁х画娴忚涓嬮潰鐨勭浉鍏虫枃绔狅紝甯屾湜澶у浠ュ悗澶氬鏀寔鑴氭湰涔嬪锛?/p>
经验首页