SVG文本布局在Chrome，Firefox，Edge中的呈现方式有所不同

Question

即使删除所有使用后alignment-baseline并dominant-baseline作为指出这里，我仍然看到我的东西呈现不同的方式在每个浏览器。

在Firefox中，图像的整个底部都被切除。

这真的是2017年的事态吗？SVG是否为标准？

是的，在SVG上有近15个不同的帖子在浏览器中呈现的方式不同。但是它们都没有在这种情况下适用，或者没有可行的解决方案。

<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   version="1.1"
   width="100%" height="165"
   viewBox="0 0 100% 100%"
   >

  <defs>
    <style type="text/css">
      @import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
      @import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
    </style>
  </defs>

  <g transform="translate(19,140)">
    <svg width="100vw" height="1.7rem">
      <rect x="0" y="0" width="100vw" height="25" class="bottom" stroke-width="0"/>
      <text x="1vw" y="65%" class="services" font-family="Roboto Condensed" fill="white">
        <tspan class="service">residential</tspan>
        <tspan class="separator" dx="5px">&#9632;</tspan>
        <tspan class="service" dx="5px">commercial</tspan>
        <tspan class="separator" dx="5px">&#9632;</tspan>
        <tspan class="service" dx="5px">buyer</tspan>
        <tspan class="separator" dx="5px">&#9632;</tspan>
        <tspan class="service" dx="5px">seller</tspan>
        <tspan class="separator" dx="5px">&#9632;</tspan>
        <tspan class="service" dx="5px">warranty</tspan>
        <tspan class="separator" dx="5px">&#9632;</tspan>
        <tspan class="service" dx="5px">expert-witness</tspan>
        <tspan class="separator" dx="5px">&#9632;</tspan>
        <tspan class="service" dx="5px">sewer</tspan>
        <tspan class="separator" dx="5px">&#9632;</tspan>
        <tspan class="service" dx="5px">radon</tspan>
      </text>

    </svg>
  </g>

  <g transform="translate(265,140)">
    <line x1="0" x2="500" y1="0" y2="0" style="stroke: green"></line>
    <text dx="70px" dy="0"
      text-anchor="start"
      font-size="38px"
      font-family="Roboto Slab"
      font-weight="bold"
      transform="rotate(-90)"
      class="logo">the</text>
    <text dx="0" dy="0"
      text-anchor="start"
      font-size="78px"
      font-family="Roboto Slab"
      font-weight="bold"
      class="logo">
        <tspan class="name" x="5" dx="0" dy="-73px">Logo</tspan>
        <tspan class="name" x="-70" dx="0" dy="65px">Design Text</tspan>
        <tspan class="name" x="0" dx="380" dy="-2" font-size="24px">llc</tspan>
    </text>
  </g>
</svg>

<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   version="1.1"
   width="100%" height="185"
   >

  <defs>
    <style type="text/css">
      @import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
      @import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
    </style>
  </defs>

  <g transform="translate(19,140)">
    <svg width="100%" height="25">
      <rect x="0" y="0" width="100%" height="25" class="bottom" stroke-width="0"/>
      <text x="10" y="65%" class="services" font-family="Roboto Condensed" fill="white">
        <tspan class="service">residential</tspan>
        <tspan class="separator" dx="5px">&#9632;</tspan>
        <tspan class="service" dx="5px">commercial</tspan>
        <tspan class="separator" dx="5px">&#9632;</tspan>
        <tspan class="service" dx="5px">buyer</tspan>
        <tspan class="separator" dx="5px">&#9632;</tspan>
        <tspan class="service" dx="5px">seller</tspan>
        <tspan class="separator" dx="5px">&#9632;</tspan>
        <tspan class="service" dx="5px">warranty</tspan>
        <tspan class="separator" dx="5px">&#9632;</tspan>
        <tspan class="service" dx="5px">expert-witness</tspan>
        <tspan class="separator" dx="5px">&#9632;</tspan>
        <tspan class="service" dx="5px">sewer</tspan>
        <tspan class="separator" dx="5px">&#9632;</tspan>
        <tspan class="service" dx="5px">radon</tspan>
      </text>

    </svg>
  </g>

  <g transform="translate(265,140)">
    <line x1="0" x2="500" y1="0" y2="0" style="stroke: green"></line>
    <text dx="70" dy="0"
      text-anchor="start"
      font-size="38px"
      font-family="Roboto Slab"
      font-weight="bold"
      transform="rotate(-90)"
      class="logo">the</text>
    <text dx="0" dy="0"
      text-anchor="start"
      font-size="78px"
      font-family="Roboto Slab"
      font-weight="bold"
      class="logo">
        <tspan class="name" x="5" dx="0" dy="-73">Logo</tspan>
        <tspan class="name" x="-70" dx="0" dy="65">Design Text</tspan>
        <tspan class="name" x="0" dx="380px" dy="-2" font-size="24px">llc</tspan>
    </text>
  </g>
</svg>

Answer 1

Firefox支持SVG 1.1标准单位

长度:: =数字（“ em” |“ ex” |“ px” |“ in” |“ cm” |“ mm” |“ pt” |“ pc” |“％”）？

您正在使用尚不支持的rem和vw单元，因为它们是在SVG 2中定义的，到目前为止，所有UA仅部分实现了这些单元。

另外，viewBox属性中的单位在SVG标准的任何版本中均无效，因此

viewBox="0 0 100% 100%"

需要更改为仅四个数字。

Firefox Web控制台向您显示所有这些问题：

意外值0 0 100％100％解析viewBox属性。
预期值100vw解析宽度属性。
意外值1.7rem分析高度属性。
预期值100vw解析宽度属性。
解析x属性的异常值1vw。

我想象其他UA也有类似的调试工具。