在svg裡實現rect的box shadow

2021-10-10 22:05:15 字數 1490 閱讀 2421

先看一下效果

(1)  在svg內部定義乙個rect元素   

濾鏡屬性filter="url(***)"用來把元素鏈結到濾鏡filter-2  

(2)自定義你的濾鏡 

元素id屬性(此處是filter-2 )定義乙個濾鏡的唯一名稱,與rect 元素上的url對應。

是不是很簡單!!!

可以讓你的設計師匯出.svg格式檔案!

用js實現的話,你在**裡要修修改改,像這樣就可以(遮蔽的不支援或者瀏覽器報錯的屬性):

.attr("id", "bgfilter")

.attr("x", "-6.7%")

.attr("y", "-11.7%")

.attr("width", "113.3%")

.attr("height", "126.7%") //filterunits="objectboundingbox"

.attr("dx", "0")

.attr("dy", "0")

.attr("in", "sourcealpha")

.attr("result", "shadowoffsetouter1")

.attr("stddeviation", 2.5)

// .attr("result", "shadowblurouter1")

.attr("in", "shadowoffsetouter1")

.attr("result", "out")

// .attr("operator", "shadowblurouter1")

.attr("in2", "sourcealpha")

// .attr("in", "shadowblurouter1")

.attr("values", "0 0 0 0 0.693642437 0 0 0 0 0.693642437 0 0 0 0 0.693642437 0 0 0 0.5 0")

.attr("type", "matrix")

// .attr("in", "shadowblurouter1")

.attr("width", "自己算吧")

.attr("height", "自己算吧")

.attr("x", "自己算吧")

.attr("y", "自己算吧")

.attr("rx", 8)

.attr("ry", 8)

.attr("fill", 'black')

.attr("fill-opacity", 1)

.attr("filter", "url(#" + bgfilter.attr("id") + ")")

這裡呈上 mdn中關於svg元素參考:

以及實現svg 陰影的教程 

OpenCV裡的常用Rect用法

opencv裡通常定義乙個矩形有兩種方式,一種是通過矩形左上角和矩形寬高來定義 rect tp x,tp y,tp width,tp height 另一種是通過矩形左上角點座標和右下角點座標來定義 rect const point tp pt1,const point tp pt2 rect類常用的...

在SSRS 裡實現 SUMIF

最近在做報表時,要實現excel中的sumif的功能,示例 sumif b 2 b 465,east g 2 g 465 即彙總b列值等於east的g列值。在ssrs中,我們想到的一定是iif語句,因此第一次寫的結果一定是 示例 sum iif fields team.value east fiel...

在OpenCV裡實現開運算

前面學習腐蝕和膨脹演算法,並且深刻地認識到它們的特性以及作用。如果由這兩種組合出來的運算又有什麼樣的不同呢?比如乙個影象先腐蝕後膨脹的操作,會有什麼結果呢?因為腐蝕是把白色變小,膨脹又是把白色變大,是否會保持原圖不變呢?帶著這些問題來研究一下先腐蝕後膨脹的演算法,我們把這樣的演算法叫做開運算,在數學...