svg 如何使用濾鏡給文字加底色
阿新 • • 發佈:2020-09-14
使用svg繪圖的過程中發現,給文字加底色是無法用屬性或者css實現的,一般情況下會在文字的基礎上繪製一個矩形,放在文字底下。但是對於不知文字大小,長度,語言版本的情況下就有點麻煩了,這種情況下使用濾鏡的方法可以更方便。【轉載本文請說明出處,謝謝!】
效果展示
方法
// 1、定義濾鏡 let defs = svg.append('defs') let circleTextFilter = defs .append('filter') .attr('id', 'circleTextBg') .attr('x', -0.1) .attr('y', -0.1) .attr('width', 1.2) .attr('height', 1.2) circleTextFilter.append('feFlood') .attr('flood-color', 'orange') .attr('flood-opacity', 0.5) circleTextFilter.append('feComposite') .attr('in', 'SourceGraphic') .attr('operator', 'over') // 2、引用濾鏡 circleText.attr('filter', 'url(#circleTextBg)')
標籤用來定義濾鏡,濾鏡必須含有id屬性來標識濾鏡 - 需要加背景的文字元素使用
filter="url(#id)"
屬性指向濾鏡
使用引數說明
-
filter
- width: 濾鏡的寬度,設定1,表示100%,也可以直接寫100%
- height: 濾鏡的高度,設定1,表示100%,也可以直接寫100%
- x: 向左位移 -0,1 表示-10%,也可以直接寫-10%
- y: 向左位移 -0,1 表示-10%,也可以直接寫-10%
-
feFlood:使用定義好的顏色flood-color和透明度flood-opacity填充了濾鏡的分割槽
- flood-color 顏色
- flood-opacity 透明度
-
feComposite:該濾鏡執行兩個輸入影象的智慧畫素組合,它接受兩個輸入, ” in”和” in2″。預設情況下, in是SourceGraphic。運算子的”輸入”屬性用於顯示合併結果。比如本例中,如果去除該行,文字將消失
- in
- SourceGraphic 表示濾鏡原始輸入應用於定義的元素上
- operator
- in 位置,應用於定義的元素上
- in