我是 svg 的新手,我正在嘗試創建類似于所附圖片的內部陰影。我已經嘗試了其他堆疊溢位的答案,但陰影似乎沒有附加的 png 那樣強烈。專家們能否提出任何可能的方法來實作同樣的目標?
uj5u.com熱心網友回復:
這看起來不像一個正常的插入陰影 - 邊界附近的不透明度太高。所以你必須做一些花哨的過濾來復制它。這是適用于任何形狀的東西:
<svg width="600px" height="600px">
<defs>
<filter id="strong-inner">
<feFlood flood-color="red"/>
<!-- This next operation subtracts the original shape from the red color
field filling the filter region - which will give you a big color border
surrounding the original shape -->
<feComposite operator="out" in2="SourceGraphic" />
<!-- Next we want to expand the red border so it overlaps the space of the
original shape - the radius 4 below will expand it by 4 pixels -->
<feMorphology operator="dilate" radius="4"/>
<feGaussianBlur stdDeviation="5" />
<!-- After blurring it, we want to select just the parts of the blurred,
expanded border that overlap the original shape - which we can do by using
the 'atop' operator -->
<feComposite operator="atop" in2="SourceGraphic"/>
</filter>
</defs>
<rect x="10" y="10" width="500" height="500" fill="rgb(50, 0 , 200)" filter="url(#strong-inner)"/>
</svg>
uj5u.com熱心網友回復:
我們可以使用box-shadow
withinset
選項。
<svg style="background: rgb(51,54,148); width: 439px; height: 419px; box-shadow: 0 0 15px 6px inset rgba(255,0,96,0.8)"></svg>
轉載請註明出處,本文鏈接:https://www.uj5u.com/shujuku/346205.html