Как создать размытый фон метки с помощью фильтров SVG?

Question

Я хотел бы иметь хороший рабочий подход для решения следующей проблемы:

На столбчатой ​​диаграмме с барами, заполненными разными, но неизвестными цветами, я хотел бы поместить метки с фиксированным черным цветом, чтобы они

Подход, который я ищу, должен выглядеть так, как в строке заголовка окна на изображении. Ярлык черный, он расположен поверх размытого белого фона, который находится сверху полосы любого цвета.

Есть ли способсделать это с помощью фильтров SVG?

Ниже приведены некоторые подходы, которые я пробовал:

    .black {
      fill: black;
    }
    .blue {
      fill: blue;
    }
    .red {
      fill: red;
    }    
    .yellow {
      fill: yellow;
    }
    .label{
      fill: black;
      font-size: 14px;
    }
    .label-background{
      fill: white;
      font-size: 16px;
    }
    .text-background{
      paint-order: stroke;
      stroke: #fff;
      fill: black;
      stroke-width: 5px;
    }
    .header{
      font-size: 20px;
    }
    .background{
      fill: white;
      opacity: 0.6;
    }

  <svg width="500" height="500">
    <defs>
      <filter x="-0.05" y="-0.1" width="1.08" height="1.2" id="solid">
        <feFlood flood-color="lightgrey"/>
        <feComposite in="SourceGraphic" operator="xor" />
      </filter>
    </defs>

    <g class="row-1" transform="translate(0,30)">
      <text class="header" x="20" y="-10">text label on top of bar </text>
      <g>
        <rect class="black" width=100 height=30></rect>
        <text class="label" x="20" y="20">my text label</text>
      </g>

      <g transform="translate(120,0)">
        <rect class="blue" width=100 height=30></rect>
        <text class="label" x="20" y="20">my text label</text>
      </g>

      <g transform="translate(240,0)">
        <rect class="red" width=100 height=30></rect>
        <text class="label" x="20" y="20">my text label</text>
      </g>

      <g transform="translate(360,0)">
        <rect class="yellow" width=100 height=30></rect>
        <text class="label" x="20" y="20">my text label</text>
      </g>
    </g>  
    
		<g class="row-2" transform="translate(0,100)">
      <text class="header" x="20" y="-10">text label on top of rect.background on top of bar </text>
      <g>
        <rect class="black" width=100 height=30></rect>
        <rect class="background" x=17 y=6 width=78 height=19></rect>
        <text class="label" x="20" y="20">my text label</text>
      </g>

      <g transform="translate(120,0)">
        <rect class="blue" width=100 height=30></rect>
        <rect class="background" x=17 y=6 width=78 height=19></rect>
        <text class="label" x="20" y="20">my text label</text>
      </g>

      <g transform="translate(240,0)">
        <rect class="red" width=100 height=30></rect>
        <rect class="background" x=17 y=6 width=78 height=19></rect>
        <text class="label" x="20" y="20">my text label</text>
      </g>

      <g transform="translate(360,0)">
        <rect class="yellow" width=100 height=30></rect>
        <rect class="background" x=17 y=6 width=78 height=19></rect>
        <text class="label" x="20" y="20">my text label</text>
      </g>
  	</g>
    
    <g class="row-3" transform="translate(0, 170)">
      <text class="header" x="20" y="-10">text label with filter #solid on top of bar </text>
      <g>
        <rect class="black" width=100 height=30></rect>
        <text class="label" filter="url(#solid)" x="20" y="20">my text label</text>
      </g>

      <g transform="translate(120,0)">
        <rect class="blue" width=100 height=30></rect>
        <text class="label" filter="url(#solid)" x="20" y="20">my text label</text>
      </g>

      <g transform="translate(240,0)">
        <rect class="red" width=100 height=30></rect>
        <text class="label" filter="url(#solid)" x="20" y="20">my text label</text>
      </g>

      <g transform="translate(360,0)">
        <rect class="yellow" width=100 height=30></rect>
        <text class="label" filter="url(#solid)" x="20" y="20">my text label</text>
      </g>
    </g> 

    <g class="row-4" transform="translate(0, 240)">
      <text class="header" x="20" y="-10">text label on top of larger text label with background color on top of bar </text>
      <g>
        <rect class="black" width=100 height=30></rect>
        <text class="label-background" x="18" y="22">my text label</text>
        <text class="label" x="20" y="20">my text label</text>
      </g>

      <g transform="translate(120,0)">
        <rect class="blue" width=100 height=30></rect>
        <text class="label-background" x="18" y="22">my text label</text>
        <text class="label" x="20" y="20">my text label</text>
      </g>

      <g transform="translate(240,0)">
        <rect class="red" width=100 height=30></rect>
        <text class="label-background" x="18" y="22">my text label</text>
        <text class="label" x="20" y="20">my text label</text>
      </g>

      <g transform="translate(360,0)">
        <rect class="yellow" width=100 height=30></rect>
        <text class="label-background" x="18" y="22">my text label</text>
        <text class="label" x="20" y="20">my text label</text>
      </g>
    </g> 
    
    <g class="row-5" transform="translate(0, 310)">
      <text class="header" x="20" y="-10">text label with paint-order: stroke on top of bar </text>
      <g>
        <rect class="black" width=100 height=30></rect>
        <text class="label text-background" x="20" y="20">my text label</text>
      </g>

      <g transform="translate(120,0)">
        <rect class="blue" width=100 height=30></rect>
        <text class="label text-background" x="20" y="20">my text label</text>
      </g>

      <g transform="translate(240,0)">
        <rect class="red" width=100 height=30></rect>
        <text class="label text-background" x="20" y="20">my text label</text>
      </g>

      <g transform="translate(360,0)">
        <rect class="yellow" width=100 height=30></rect>
        <text class="label text-background" x="20" y="20">my text label</text>
      </g>
    </g> 
  </svg>
  

Answer 1

Поскольку вы запрашиваете решение для фильтрации SVG:

1. Начните с SourceAlpha, который дает черный силуэт элемента (то есть текста), а затем размыть его с помощью feGaussianBlur для создания мягкой тени.
2. Эта тень будет черной, поэтому используйте feColorMatrix, чтобы сделать ее белой.
3. Наконец, поместите исходный текст поверх тени, используя feBlend.

Ссылки:

• SVG Drop Shadows (см. Пример 3)
• Fishinging feColorMatrix

.black {
  fill: black;
}
.blue {
  fill: blue;
}
.red {
  fill: red;
}    
.yellow {
  fill: yellow;
}
.label {
  fill: black;
  font-size: 14px;
}

<svg width="500" height="80" color-interpolation-filters="sRGB">
  <defs>
    <filter id="shadow">
      <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur" />
      <feColorMatrix in="blur" type="matrix" values="0  0  0  0  1
                                                     0  0  0  0  1
                                                     0  0  0  0  1
                                                     0  0  0  8  0" result="white" />
      <feColorMatrix in="white" type="matrix" values="1  0  0  0  0
                                                      0  1  0  0  0
                                                      0  0  1  0  0
                                                      0  0  0 .8  0" result="dim" />
      <feBlend in="SourceGraphic" in2="dim" mode="normal" />
    </filter>
  </defs>

  <g class="row-1" transform="translate(10,30)">
    <text class="header" x="0" y="-10">feGaussianBlur on SourceAlpha</text>
    <g>
      <rect class="black" width=100 height=30></rect>
      <text class="label" x="20" y="20" filter="url(#shadow)">my text label</text>
    </g>
    <g transform="translate(120,0)">
      <rect class="blue" width=100 height=30></rect>
      <text class="label" x="20" y="20" filter="url(#shadow)">my text label</text>
    </g>
    <g transform="translate(240,0)">
      <rect class="red" width=100 height=30></rect>
      <text class="label" x="20" y="20" filter="url(#shadow)">my text label</text>
    </g>
    <g transform="translate(360,0)">
      <rect class="yellow" width=100 height=30></rect>
      <text class="label" x="20" y="20" filter="url(#shadow)">my text label</text>
    </g>
  </g>  
</svg>

Answer 2

Тщательно не протестировано, но создание text-shadow с несколькими значениями дает желаемый эффект:

    svg text {
      text-shadow: 0px 0px 2px white,
                   0px 0px 4px white,
                   0px 0px 6px white,
                   0px 0px 8px white,
                   0px 0px 10px white;
    }

Рабочий пример:

    .black {
      fill: black;
    }
    .blue {
      fill: blue;
    }
    .red {
      fill: red;
    }    
    .yellow {
      fill: yellow;
    }
    .label{
      fill: black;
      font-size: 14px;
    }

svg g.row-1 text {
  text-shadow: 0px 0px 2px white,
               0px 0px 4px white,
               0px 0px 6px white,
               0px 0px 8px white,
               0px 0px 10px white;
}

<svg width="500" height="500">
    <defs>
      <filter x="-0.05" y="-0.1" width="1.08" height="1.2" id="solid">
        <feFlood flood-color="lightgrey"/>
        <feComposite in="SourceGraphic" operator="xor" />
      </filter>
    </defs>

    <g class="row-1" transform="translate(0,30)">
      <g>
        <rect class="black" width=100 height=30></rect>
        <text class="label" x="20" y="20">my text label</text>
      </g>

      <g transform="translate(120,0)">
        <rect class="blue" width=100 height=30></rect>
        <text class="label" x="20" y="20">my text label</text>
      </g>

      <g transform="translate(240,0)">
        <rect class="red" width=100 height=30></rect>
        <text class="label" x="20" y="20">my text label</text>
      </g>

      <g transform="translate(360,0)">
        <rect class="yellow" width=100 height=30></rect>
        <text class="label" x="20" y="20">my text label</text>
      </g>
    </g>  
</svg>