SVG 掩码最初未在 Chrome 中加载答案

【问题标题】：SVG mask not loading initially in ChromeSVG 掩码最初未在 Chrome 中加载
【发布时间】：2020-11-03 05:34:01
【问题描述】：

在主页英雄组件上使用 SVG 蒙版的项目上工作，但由于某种原因，蒙版中的文本仅在我调整窗口大小时显示。它没有显示在初始页面加载中。这只发生在 Chrome（最新版本）中。

您可以在此处查看有关 STAGING 环境的示例：https://staging.erwconstructions.com.au/

HTML 标记是：

<section data-component="mask-hero" class="in-view mask-hero">
  <picture>
    <img src="https://staging.erwconstructions.com.au/wp-content/uploads/2020/07/home-hero.jpg" alt="Home">
    <svg width="100%" height="100%" viewBox="0 0 100% 100%">
      <defs>
        <linearGradient id="gradient">
          <stop offset="100%" stop-color="black" />
        </linearGradient>
        <mask id="mask">
          <rect width="100%" height="100%" fill="#fff" />
          <text x="0" y="50%">
            <tspan x="5vw" dy="-.1em">Building</tspan>
            <tspan x="5vw" dy="1em">Redefined</tspan>
          </text>
        </mask>
      </defs>
      <rect width="100%" height="100%" fill="url(#gradient)" fill-opacity="0.9" mask="url(#mask)" />
    </svg>
  </picture>
</section>

CSS 是：

[data-component="mask-hero"] {
  height: 100vh;
  padding: 0;
  background: none;
  & picture {
    display: block;
    height: 100vh;
    & img {
      height: 100%;
      object-fit: cover;
      object-position: center;
      position: fixed;
      will-change: transform;
      width: 100%;
      z-index: -1;
    }
    & svg {
      display: block;
      height: 100%;
    }
    & text {
      font-family: var(--defaultFont);
      font-weight: var(--bold);
      font-size: 3em;
      @media (--app-breakpoint-2) {
        font-size: 6em;
      }
      @media (--app-breakpoint-4) {
        font-size: 8em;
      }
      @media (--app-breakpoint-5) {
        font-size: 14em;
      }
    }
  }
}

由于某种原因，即使在 SVG 上设置了正确的属性，也存在关于 viewBox 的控制台错误：

Error: <svg> attribute viewBox: Expected number, "0 0 100% 100%".

任何帮助将不胜感激。

谢谢，戴恩

【问题讨论】：

标签： google-chrome svg mask

【解决方案1】：

根据给定的错误，我猜问题出在viewBox。它应该以 px 为单位给出一个绝对数字，而不是百分比。赞<svg viewBox="0 0 100 100">

【讨论】：

感谢您的回复，但是当我将 viewBox 更改为：0 0 100 100 时，它看起来像这样：snipboard.io/xwm5Ej.jpg 不跨越整个视口宽度和高度，并且仍然不显示文本。

【解决方案2】：

您是否尝试过使用 javascript 使其工作？下面的代码在 svg 代码内的 rect 上将背景颜色添加为白色，以在页面加载时显示文本。

var svgRect = document.querySelector('svg rect');document.addEventListener("DOMContentLoaded", function(){ setTimeout(function() { svgRect.style.backgroundColor = 'white'; }, 500); });

【讨论】：