SVG прямоугольник закрывает окно просмотра

Question

Я хочу показать видео через текст SVG. У меня есть SVG с элементом rect, который я хочу использовать, чтобы закрыть область просмотра как часть моей маски. Я применил CSS, чтобы закрыть область просмотра белым фоном и просто замаскировал текст (svg), однако элемент rect выровнен вправо, поэтому охватывает только половину экрана.

Markup;

<svg xmlns="http://www.w3.org/2000/svg" width="85" height="109" viewBox="0 0 85 109">
  <defs>
    <mask id="mask" x="0" y="0" width="1920" height="1080" >
      <rect x="0" y="0" width="1920" height="1080"/>
  <path fill="#474746" fill-rule="evenodd" d="M29.1853,1.0001 L29.1853,59.1711 L29.4843,59.1711 C34.1333,48.5261 42.6773,43.4291 54.2233,43.4291 C67.4163,43.4291 75.0613,52.2741 75.0613,64.2691 L75.0613,106.9971 L85.1073,106.9971 L85.1073,109.0951 L47.4773,109.0951 L47.4773,106.9971 L56.7703,106.9971 L56.7703,59.1711 C56.7703,51.8251 53.3243,47.4771 47.3273,47.4771 C41.9283,47.4771 37.5803,50.0251 34.1333,55.1231 C30.8333,60.0701 29.1853,66.6671 29.1853,74.3131 L29.1853,106.9971 L38.6313,106.9971 L38.6313,109.0951 L0.9993,109.0951 L0.9993,106.9971 L10.8933,106.9971 L10.8933,3.0991 L0.9993,3.0991 L0.9993,1.0001 L29.1853,1.0001 Z" transform="translate(-1 -1)"/>
    </mask>
  </defs>
  <rect x="0" y="0" width="1920" height="1080"/>
</svg>
<video id="video" autoplay="autoplay" muted="muted" preload="auto" loop="loop">
    <source src="http://mazwai.com/system/posts/videos/000/000/123/original/victor_ciurus--5d_mark_iii_magic_lantern_14_bits_raw_video.mp4?1412890624" type="video/mp4">
    <source src="http://mazwai.com/system/posts/videos/000/000/123/webm/victor_ciurus--5d_mark_iii_magic_lantern_14_bits_raw_video.webm?1412890624" type="video/webm">
</video>

CSS;

svg {
  width: 100%;
  height: 100%;
  position:absolute;
}
svg mask rect {
  fill: rgba(255, 255, 255, 1);
}
svg > rect {
  fill: white;
  -webkit-mask: url(#mask);
  mask: url(#mask);
}
video{
  position: absolute;
  top: 0%;
  left: 0%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -1;
  overflow: hidden;
}

Предварительный просмотр - https://codepen.io/SamXronn/pen/JedPay?editors=1100

Answer 1

Прежде всего измените свой атрибут viewBox на правильный, и на самом деле я не уловил оригинальную идею, потому что у вас нет прозрачности на rect Это похоже на белую обложку на верхнем видео, и только " Символ H "виден сверху видео в левом углу. Это правильно?

• Обновление viewBox атрибута в теге SVG - вы можете использовать этот <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" width="1920px" height="1080px" preserveAspectRatio="xMidYMid slice">
• Удалить width: 100%; height: 100%; из тега SVG
• Принять transparency на маске, если это необходимо

Пожалуйста, найдите обновленную версию здесь: https://codepen.io/anon/pen/qQdagO?editors=1100

Answer 2

Попробуйте добавить preserveAspectRatio="xMinYMin meet" к элементу SVG. Это гарантирует, что прямоугольник будет нарисован, начиная с верхнего левого угла. Посмотрите на https://codepen.io/jonitrythall/post/preserveaspectratio-in-svg для получения дополнительной информации о том, как это работает.