Маска SVG не загружается изначально в Chrome - PullRequest
Новая
       101

Маска SVG не загружается изначально в Chrome

0 голосов
/ 14 июля 2020

Работа над проектом, который использует маску 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;
      }
    }
  }
}

По какой-то причине также возникает консольная ошибка в отношении viewBox, даже если в SVG установлены правильные атрибуты:

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

Любая помощь будет принята с благодарностью.

Спасибо, Дайн

Ответы [ 2 ]

0 голосов
/ 28 августа 2020

Вы пробовали использовать javascript, чтобы он работал? Этот код ниже добавляет цвет фона к белому прямоугольнику внутри кода SVG, чтобы отображать текст после загрузки страницы.

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

0 голосов
/ 14 июля 2020

Судя по данной ошибке, я предполагаю, что проблема связана с viewBox. Следует указывать абсолютное число в пикселях, а не в процентах. Нравится <svg viewBox="0 0 100 100">

...