Question

我使用SVG蒙版从白色矩形中剪切文本并显示其背后的背景。当文本在一行上时，一切都很完美。在移动设备上，我想包装文本并左对齐，所以我将文本分成两个元素（但仍然是一个SVG）。

问题出现时：SVG的第二行没有显示。使用Chrome进行检查时，元素的位置恰好位于它应该的位置，但它不可见。所有其他浏览器也是如此（尚未检查过Internet Explorer）。

它应该看起来像这样（注意第二行）：screenshot of the intended design。

我已经检查过拼写错误，试图省略SVG的第一行（＆＃34;制作＆＃34;部分）并广泛搜索 - 没有任何效果。关于未显示的SVG的大多数问题都是指动态创建的，这在这种情况下并不适用。这似乎是一个非常具体的错误（最有可能是我）。

请看看它，看看你是否能找到错误。谢谢！

这里有一个codepen：https://codepen.io/connor_baer/pen/yJONxN，这里是代码（调整视口大小以查看移动版本）：

＆＃13;

.header {
  background-color: blue;
  height: 100vh;
  width: 100vw;
  background: url('https://images.unsplash.com/photo-1465152251391-e94453ee3f5a?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=2f3699fc4dbc682fbecdc4fa4d5f6cad') 50% 50% / cover;
}

.header-large {
  display: none;
}

.header-small {
  display: none;
}

.header-text {
  font-size: 3.5rem;
  font-family: Arial;
  font-weight: bold;
}

@media (max-width: 36em) {
  .header-small {
    display: block;
    width: 50%;
    margin: 0 auto;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}

@media (min-width: 36em) {
  .header-large {
    display: block;
    width: 32rem;
    max-width: 80%;
    margin: 0 auto;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}

＆＃13;

<header>
  <div class="header">
    <svg class="header-large" viewbox="0 0 450 75">
      <defs>
        <g id="text-large">
          <text class="header-text" text-anchor="middle" x="225" y="53">Made by Connor.</text>
        </g>
        <mask id="mask-large" x="0" y="0" width="450" height="75">
          <rect x="0" y="0" width="450" height="75" fill="#fff"/>
          <use xlink:href="#text-large" />
        </mask>
      </defs>
      <rect x="0" y="0" width="450" height="75" mask="url(#mask-large)" fill="white" fill-opacity="1"/>
      <use xlink:href="#text-large" mask="url(#mask-large)" />
    </svg>
    <svg class="header-small" viewbox="0 0 240 150">
      <defs>
        <g id="text-top">
          <text class="header-text" x="15" y="53">Made by</text>
        </g>
        <mask id="mask-top" x="0" y="0" width="240" height="75">
          <rect x="0" y="0" width="240" height="75" fill="#fff"/>
          <use xlink:href="#text-top" />
        </mask>
        <g id="text-bottom">
          <text class="header-text" x="15" y="128">Connor.</text>
        </g>
        <mask id="mask-bottom" x="0" y="75" width="210" height="75">
          <rect x="0" y="75" width="210" height="75" fill="#fff"/>
          <use xlink:href="#text-bottom" />
        </mask>
      </defs>
      <rect x="0" y="0" width="240" height="75" mask="url(#mask-top)" fill="white" fill-opacity="1"/>
      <use xlink:href="#text-top" mask="url(#mask-top)" />
      <rect x="0" y="75" width="210" height="75" mask="url(#mask-bottom)" fill="white" fill-opacity="1"/>
      <use xlink:href="#text-bottom" mask="url(#mask-bottom)" />
    </svg>
  </div>
</header>

＆＃13;

Answer 1

您的主要问题是您的mask units显然是用户空间单位，但默认为objectBoundingBox。我已经解决了以下问题。使用您编写的标记，掩码从屏幕底部开始，即75 x形状的高度。

SVG也区分大小写，因此您需要viewBox而不是viewbox。

.header {
  background-color: blue;
  height: 100vh;
  width: 100vw;
  background: url('https://images.unsplash.com/photo-1465152251391-e94453ee3f5a?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=2f3699fc4dbc682fbecdc4fa4d5f6cad') 50% 50% / cover;
}

.header-large {
  display: none;
}

.header-small {
  display: none;
}

.header-text {
  font-size: 3.5rem;
  font-family: Arial;
  font-weight: bold;
}

@media (max-width: 36em) {
  .header-small {
    display: block;
    width: 50%;
    margin: 0 auto;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}

@media (min-width: 36em) {
  .header-large {
    display: block;
    width: 32rem;
    max-width: 80%;
    margin: 0 auto;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}

<header>
  <div class="header">
    <svg class="header-large" viewBox="0 0 450 75">
      <defs>
        <g id="text-large">
          <text class="header-text" text-anchor="middle" x="225" y="53">Made by Connor.</text>
        </g>
        <mask id="mask-large" x="0" y="0" width="450" height="75">
          <rect x="0" y="0" width="450" height="75" fill="#fff"/>
          <use xlink:href="#text-large" />
        </mask>
      </defs>
      <rect x="0" y="0" width="450" height="75" mask="url(#mask-large)" fill="white" fill-opacity="1"/>
      <use xlink:href="#text-large" mask="url(#mask-large)" />
    </svg>
    <svg class="header-small" viewBox="0 0 240 150">
      <defs>
        <g id="text-top">
          <text class="header-text" x="15" y="53">Made by</text>
        </g>
        <mask id="mask-top" x="0" y="0" width="240" height="75" maskUnits="userSpaceOnUse">
          <rect x="0" y="0" width="240" height="75" fill="#fff"/>
          <use xlink:href="#text-top" />
        </mask>
        <g id="text-bottom">
          <text class="header-text" x="15" y="128">Connor.</text>
        </g>
        <mask id="mask-bottom" x="0" y="75" width="210" height="75" maskUnits="userSpaceOnUse">
          <rect x="0" y="75" width="210" height="75" fill="#fff"/>
          <use xlink:href="#text-bottom" />
        </mask>
      </defs>
      <rect x="0" y="0" width="240" height="75" mask="url(#mask-top)" fill="white" fill-opacity="1"/>
      <use xlink:href="#text-top" mask="url(#mask-top)" />
      <rect x="0" y="75" width="210" height="75" mask="url(#mask-bottom)" fill="white" fill-opacity="1"/>
      <use xlink:href="#text-bottom" mask="url(#mask-bottom)" />
    </svg>
  </div>
</header>

屏蔽的SVG元素未显示在第二行

1 个答案: