svg 中的相邻的两个path区域，填充颜色怎么实现融合过度呢？

Question

如上图，怎么实现这两个想接触的颜色能柔和的融合过度呢，类似热力图中那种，边缘颜色接触后，融合到一起自然的过度；

自己网上找到使用filter，但是按照教程并没有实现，求助具体应该怎么设置filter的这些属性，来实现边缘颜色的过度

下面是用于大家测试的svg代码：

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="&#x56FE;&#x5C42;_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
     y="0px" viewBox="0 0 1366 768" style="enable-background:new 0 0 1366 768;" xml:space="preserve">
  <path d="M881.002,459.004h-81v-28.998h81V459.004z" fill="red"/>
  <path d="M899.628,456.002l-11.98-0.002l-2.007,3.003h-4.639v-28.998h78v28.998h-57.383L899.628,456.002z" fill="green"/>
</svg>

下面是我在网上找到的filter相关的代码，但没实现：

<filter id="filter-hotmapSource">
  <feGaussianBlur
    in="SourceGraphic"
    stdDeviation="0"
    result="blur"
  />
  <feColorMatrix
    in="blur"
    mode="matrix"
    values="10 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9"
    result="colorMatrix"
  />
  <feComposite in="SourceGraphic" in2="colorMatrix" operator="atop"/>
</filter>