svg 如何使用濾鏡給文字加底色

使用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)')

1. 標籤用來定義濾鏡，濾鏡必須含有id屬性來標識濾鏡
2. 需要加背景的文字元素使用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 位置，應用於定義的元素上