Question

我希望通过SVG文本显示视频，我的SVG内部带有rect元素，希望以此作为遮罩的一部分覆盖视口。我已经应用CSS来用白色背景覆盖视口，并且只对文本（svg）进行了遮罩，但是rect元素在右边是对的，因此仅覆盖了一半的屏幕。

标记；

<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

尝试将preserveAspectRatio="xMinYMin meet"添加到SVG元素。这样可以确保从左上角开始绘制矩形。看看https://codepen.io/jonitrythall/post/preserveaspectratio-in-svg，了解有关其工作原理的更多信息。

Answer 2

首先，通过正确的更改viewBox属性，实际上，我没有领会原来的想法，因为您在rect上没有不透明的感觉，并且在视频的左上角仅可见“ H”符号。正确吗？

更新SVG标签上的viewBox属性-您可以使用此<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" width="1920px" height="1080px" preserveAspectRatio="xMidYMid slice">
从SVG标签中删除width: 100%; height: 100%;
必要时在面罩上采用transparency

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

SVG rect覆盖视口

2 个答案: