代码之家 › 专栏 › 技术社区 › archvist

SVG矩形覆盖视口

svg css html

archvist · 技术社区 · 7 年前

rect 元素,我想用它来覆盖视口,作为我的遮罩的一部分。我已经应用了CSS来覆盖带有白色背景的视口,并且只是屏蔽了文本(svg),但是 矩形

加价;

<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

2 回复 | 直到 7 年前

Peter Collingridge 7 年前

尝试添加 preserveAspectRatio="xMinYMin meet" 到SVG元素。这样可以确保矩形从左上角开始绘制。看一看 https://codepen.io/jonitrythall/post/preserveaspectratio-in-svg

pepsilike 7 年前

首先改变你的想法 viewBox 属性是正确的,事实上,我没有抓住最初的想法,因为你没有不透明的表面 rect 它看起来像白色封面上的视频,只有“H”符号是可见的顶部的视频在左角。对吗?

更新 视图框 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" width="1920px" height="1080px" preserveAspectRatio="xMidYMid slice">
删除 width: 100%; height: 100%;
领养 transparency

请在此处查找更新版本: https://codepen.io/anon/pen/qQdagO?editors=1100