css 在SVG容器内的左下角对齐单个flexbox项目(视频)

jk9hmnmh 于 2023-05-02 发布在其他

关注(0)|答案(2)|浏览(175)

我有一个SVG容器，它位于垂直/水平中心，具有预定义的纵横比（即：e.，1.77）。
我需要在SVG画布内的固定位置放置一个视频元素。在此之前，我使用的是foreignObject，它在除Safari之外的所有浏览器中都运行良好（参见此处：Wrong position of element inside SVG foreignObject on Safari）。
不，我回到试图让我的头周围的flexbox，以及如何定位视频在左下角（那里的其他矩形）。
什么样的CSS魔法可以做到这一点？
当然，当用户调整浏览器大小时，视频应该与左下角的框相似。
Codepen：https://codepen.io/Kalaschnik/pen/OJBVOKL

* {
    overflow: hidden;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

video {
    position: absolute;
    height: 100px;
    /* How to place video at the bottom left of the SVG */
    /* left: ??? */
    /* bottom: ??? */
}

svg {
    --aspectRatio: 1.7777777;
    width: min(100vw, (100vh * var(--aspectRatio)));
    height: min(100vh, (100vw / var(--aspectRatio)));
}

<video autoplay loop muted playsinline>
    <source src="https://ccp-odc.eva.mpg.de/matt/output-hevc-safari.mp4" type='video/mp4; codecs="hvc1"'>
    <source src="https://ccp-odc.eva.mpg.de/matt/output-vp9-chrome.webm" type="video/webm">
</video>

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 1080" style="enable-background:new 0 0 1920 1080;" xml:space="preserve">
  <rect fill="#00A99D" width="1920" height="1080" />
    <rect y="780" fill="#208096"  width="200" height="300" />
    <rect x="860" y="390" fill="#208096" width="200" height="300" />
</svg>

css

来源：https://stackoverflow.com/questions/76006919/align-single-flexbox-item-video-at-bottom-left-within-svg-container

2条答案

按热度按时间

5f0d552i1#

如果您将视频和SVG Package 在<div>中，并在<div>而不是SVG上设置宽度和高度，则只需将视频绝对位置放置在左下角。SVG将占用整个空间，只要它是相同的长宽比。<div>需要相对定位，但这对外部元件（主体）的弯曲没有影响。

* {
  overflow: hidden;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

video {
  position: absolute;
  height: 100px;
  left: 0;
  bottom: 0;
}

div {
  position: relative;
  --aspectRatio: 1.7777777;
  width: min(100vw, (100vh * var(--aspectRatio)));
  height: min(100vh, (100vw / var(--aspectRatio)));
}

<div>
  <video autoplay loop muted playsinline>
    <source src="https://ccp-odc.eva.mpg.de/matt/output-hevc-safari.mp4" type='video/mp4; codecs="hvc1"'/>
    <source src="https://ccp-odc.eva.mpg.de/matt/output-vp9-chrome.webm" type="video/webm"/>
  </video>

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080">
    <rect fill="#00A99D" width="1920" height="1080" />
    <rect y="780" fill="#208096"  width="200" height="300" />
    <rect x="860" y="390" fill="#208096" width="200" height="300" />
  </svg>
</div>

赞(0）回复(0）举报 2023-05-02

zpjtge222#

得到了类似的修复不使用flexbox
为了完整起见：

* {
    overflow: hidden;
}

.container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

svg {
    --aspectRatio: 1.7777777;
    width: min(100vw, (100vh * var(--aspectRatio)));
    height: min(100vh, (100vw / var(--aspectRatio)));
}

video {
    position: absolute;
    height: 30%;
    left: 0;
    bottom: 0;
}

<div class="container">
  <video autoplay loop muted playsinline>
    <source src="https://ccp-odc.eva.mpg.de/matt/output-hevc-safari.mp4" type='video/mp4; codecs="hvc1"'/>
    <source src="https://ccp-odc.eva.mpg.de/matt/output-vp9-chrome.webm" type="video/webm"/>
  </video>

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080">
    <rect fill="#00A99D" width="1920" height="1080" />
    <rect y="780" fill="#208096"  width="200" height="300" />
    <rect x="860" y="390" fill="#208096" width="200" height="300" />
  </svg>
</div>

赞(0）回复(0）举报 2023-05-02

我来回答

css 在SVG容器内的左下角对齐单个flexbox项目(视频)

2条答案

相关问题

热门标签

最新问答