时间戳

首页 > 解决方案 > SVG 掩码最初未在 Chrome 中加载

google-chrome - SVG 掩码最初未在 Chrome 中加载

问题描述

处理在主页英雄组件上使用 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-chromesvgmask

解决方案

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

推荐阅读