Question

即使删除所有使用alignment-baseline和dominant-baseline的{{3}}，我仍然会在每个浏览器中看到我的内容呈现方式不同。

在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 standard for units

length :: = number（“em”|“ex”|“px”|“in”|“cm”|“mm”|“pt”|“pc”|“％”）？

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

此视图属性中的单位在SVG标准的任何版本中都是无效的，所以

viewBox="0 0 100% 100%"

需要改为只有四个数字。

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

意外值0 0 100％100％解析viewBox属性   意外值100vw解析宽度属性。
  意外值1.7rem解析高度属性。
  意外值100vw解析宽度属性。
  意外值1vw解析x属性。

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

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

1 个答案: