如何修复：跨浏览器在svg中显示文本？

Question

我的svg在IE，Edge和Chrome中显示正确。 Firefox不起作用。问题是，文本看起来不正确。

Chrome chrome

FF Firefox Version

这里是我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

OP增加了更多代码。

我用<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>