Как исправить: отображение текста в svg через браузеры?

Question

Мой svg отображается правильно в IE, Edge и Chrome. Firefox не работает. Проблема в том, что текст выглядит неправильно.

Chrome хром

FF Версия Firefox

Вот код моего svg. Я действительно не знаю, в чем проблема.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="780px" height="540px" viewBox="0 0 780 540" enable-background="new 0 0 780 540" xml:space="preserve">
  <a href="https://www.google.ch" target="_blank">
    <g>
      <image
        overflow="visible"
        opacity="0.35"
        width="56"
        height="52"
        xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADkAAAA1CAYAAAD72kP+AAAACXBIWXMAAAsSAAALEgHS3X78AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAu9JREFUeNrsmmtv0zAUhp1LU5goDDGuAgk+8oH//0s2beIqBmUbW9e10DVN13AOeU0PrtMLrUuqOtKreU2jniev7ZP4OFRbcMQzzgcbxJIvAhkY2iRIqVJIhorweYx2uAGwI2goNLJBasA66Q6pQdoh1SrsqnbshpSSfpA6pGtSpkFNyBiAT0nPSXsAjSvu4oB0RTohHZPOAf6769ogGwB8Q3pF2hVuVtFJhuyRTkmHpD4c7QP0j0OBgGTnHpJekl6jnVR4XPL4+0m6S+qSPiNePZfkZjcM4dpt0n0APsI4rTJkF+41EGsk4y1LITFgE1xUxw2oYneNMCZriHsiG8RTHgBkrqxqGpGxhWVZIFRbcHhID+khPaSH9JAe0kN6SA/pIT2kh/SQHtJDbiFkbvzdlKM07jInR0J5hYF1bGa8UyH5C7y0zsWSFMrUuK5QNUBdyRqIeIcmbGzcEV0d4hXpFulCFQUgvhm31HhlOqgIIMNxieASsbZVURfJZA+MxIV6gbYGoET9vSodWtwP/hMcQ3BBh8t0Z6RPpCPSW1XUQlowa2RCyqB1l81s9lsAgzV2TV2HZOe+kt6R9kkHaJ/g/NDmpDkm+7C+h3a/ZHy6hLXBsUvfSB/h3j7EgE24m0pjopLZaij6u67edtC+XgNsGVzTAneEz84wl6RmbNEcs1YPF7ehK/zvAnYeuAPAccH1A861xIQzMbSiGT8ou6521AXsonDvMR7P8d1UjMGJVBfN+eM3cHXVsMvAdRFP2cQ4N+QqYU1I53DLTBA6n0bIpVx653r9A9ITVWyqeAE9U0VJfhcPFQmuy41cd4Gpn0GOoSYmk7boktm/PGouMwsuCruH84ka79i4dAm3yrw2L6wG3UFXlvtuvriAc5G8p8E+VsUGKA05BOQpEvt3F3AuH8dssLz15B6g63CyB9COK7h1PHNK2BrgzIlnADmBW+dbRCDeYkJLWnL+Yr7OVyW5Pyi3LFv4w6/WzTh+CTAA7UuPJ4vLMvAAAAAASUVORK5CYII="
        transform="matrix(1 0 0 1 490.2483 147.248)"
      ></image>
      <g>
        <g>
          <polygon
            fill="red"
            points="540.724,151.425 540.724,180.043 518.262,191.72 495.801,180.043 495.801,151.425"
          />
          <polygon
            fill="none"
            stroke="#D9D9D9"
            stroke-width="0.75"
            stroke-linejoin="round"
            stroke-miterlimit="10"
            points="540.724,151.425 540.724,180.043 518.262,191.72 495.801,180.043 495.801,151.425"
          />
        </g>
      </g>
    </g>
  </a>
  <text transform="matrix(1 0 0 1 509.5081 163.1104)">
    <tspan x="0" y="0" fill="#949495" font-family="'Calibri'" font-size="11">
      <a href="https://google.ch">KVP</a>
    </tspan>
    <tspan
      x="-0.516"
      y="12"
      fill="#949495"
      font-family="'Calibri'"
      font-size="11"
    >
      <a href="https://google.ch">[VP]</a>
    </tspan>
  </text>
  <path
    fill="none"
    stroke="#A3D2C4"
    stroke-width="0.75"
    stroke-linejoin="round"
    stroke-miterlimit="10"
    d="M664.349,162.086"
  />
</svg>

Answer 1

Это не ответ, это просто комментарий: как вы можете видеть, следующий пример работает одинаково в Chrome и FF. В вашем коде должно быть что-то еще, что вызывает проблему.

svg{border:1px solid;}

<svg viewBox="240 120 90 50">
  <rect x="260" y="135" width="50" height="20" fill="none" stroke="black" />
  
  <text id="txt"
    transform="matrix(1 0 0 1 262.6731 147.9746)"
    fill="#1D1D1B"
    font-family='Calibri'
    font-size="11"
  >
    Betrieb
  </text>
</svg>

UPDATE

ОП добавил больше кода.

Я заменил <tspan> элементами <text>. Вместо <a> внутри текста, теперь <a> переносит текст. Также я заменил ваше изображение тенью, созданной с помощью фильтра SVG.

svg{border:1px solid}
text{fill:#949495;font-family:Calibri;font-size:11;text-anchor:middle}

<svg viewBox="480 140 78 60">
   <defs>
    <filter id="f">
       <feGaussianBlur in="SourceAlpha" stdDeviation="1.3" result="desenfoque"></feGaussianBlur>
       <feOffset in="desenfoque" dx="0" dy="0" result="sombra"></feOffset>
       <feMerge>
         <feMergeNode in="sombra"></feMergeNode>
         <feMergeNode in="SourceGraphic"></feMergeNode>
       </feMerge>
    </filter>
  </defs>
  
  <a href="https://www.google.ch" target="_blank">
    <g>
      <g>
        <g filter="url(#f)">
          <polygon
            fill="red"
            points="540.724,151.425 540.724,180.043 518.262,191.72 495.801,180.043 495.801,151.425"
          />
          <polygon
            fill="none"
            stroke="#D9D9D9"
            stroke-width="0.75"
            stroke-linejoin="round"
            stroke-miterlimit="10"
            points="540.724,151.425 540.724,180.043 518.262,191.72 495.801,180.043 495.801,151.425"
          />
        </g>
      </g>
    </g>
  </a>
  <a href="https://google.ch">
  <text x="518.5" y="167" >KVP</text>
  </a>
  <a href="https://google.ch">
  <text x="518.5" y="180" >[VP]</text>
  </a>
  
  <!--This path has a width and a height == 0 
  you can delete it -->
  <path 
    fill="none"
    stroke="#A3D2C4"
    stroke-width="0.75"
    stroke-linejoin="round"
    stroke-miterlimit="10"
    d="M664.349,162.086"
  />
    
</svg>