CODEWITHSUNDEEP
htmlcsssvg
archvist
archvist

Reputation: 722

SVG rect cover the viewport

I'm looking to show a video through SVG text, I Have an SVG with a rect element inside I'm looking to use that to cover the viewport as part of my mask. I've applied the CSS to cover the viewport with a white background and just have the text (svg) masked, however, the rect element is justified to the right, so only covers half the screen.

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;
}

Live preview - https://codepen.io/SamXronn/pen/JedPay?editors=1100

Upvotes: 1

Views: 1047

Answers (2)

pepsilike
pepsilike

Reputation: 226

First of all change your viewBox attribute by correct one, and actually, I didn't catch the original idea, cause you have no opacity on the rect It looks like white cover on top video, and only "H" symbol is visible on top of the video in the left corner. Is it correct?

  • Update viewBox attribute on SVG tag - you can use this one <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" width="1920px" height="1080px" preserveAspectRatio="xMidYMid slice">
  • Remove width: 100%; height: 100%; from SVG tag
  • Adopt transparency on the mask, if it's necessary

Please, find the updated version here: https://codepen.io/anon/pen/qQdagO?editors=1100

Upvotes: 0

Peter Collingridge
Peter Collingridge

Reputation: 10979

Try adding preserveAspectRatio="xMinYMin meet" to the SVG element. This ensures the rect will be drawn starting at the top, left corner. Take a look at https://codepen.io/jonitrythall/post/preserveaspectratio-in-svg for more information about how this works.

Upvotes: 2

Related Questions