google-chrome - SVG 文本布局在 Chrome、Firefox、Edge 中呈现不同

Question

即使删除了所有 alignment-baseline 和 dominant-baseline 的使用，如 here 所指出的那样，我仍然看到我的东西在每个浏览器中呈现不同。

在 Firefox 中，我的图像的整个底部都被切掉了。

2017 年真的是这样吗？ SVG 是不是标准？

是的，有近 15 篇不同的文章介绍了 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="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 standard for units

length ::= number ("em" | "ex" | "px" | "in" | "cm" | "mm" | "pt" | "pc" | "%")?

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

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

viewBox="0 0 100% 100%"

需要更改为只有四个数字。

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

Unexpected value 0 0 100% 100% parsing viewBox attribute.
Unexpected value 100vw parsing width attribute.
Unexpected value 1.7rem parsing height attribute.
Unexpected value 100vw parsing width attribute.
Unexpected value 1vw parsing x attribute.

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