Question

我试图将SVG图像堆叠在一起，但是我看到的行为很奇怪。

我正在使用位置相对绝对的简单包装器将它们彼此堆叠。

令我真正困惑的是，顺序似乎很重要（不仅是顶部的图像，而且还涉及图像的显示方式），即使它们的位置是绝对的。据我了解，两个绝对定位的元素不会相互影响。

以前有人遇到过这种行为吗？

这是我的问题的代码sandbox。

编辑：该问题确实在Chrome中发生，但在Safari中没有发生。

沙盒（奇怪地）产生一条错误消息，所以我在这里发布代码：

import React from "react";
import ReactDOM from "react-dom";
import { ReactComponent as DottedBall } from "./dotted-ball.svg";
import { ReactComponent as Overlay } from "./index-overlay-1.svg";
import styled from "styled-components";

import "./styles.css";

const SVGWrapper = styled.div`
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 20rem;
  width: 20rem;
`;

const Wrapper = styled.div`
  height: 100vh;
  position: relative;
`;

function App() {
  return (
    <>
      <Wrapper>
        <SVGWrapper>
          {/* wrapper I */}
          <DottedBall />
        </SVGWrapper>
        <SVGWrapper>
          {/* wrapper II - try putting before wrapper I */}
          <Overlay />
        </SVGWrapper>
      </Wrapper>
      <svg width="750" height="500" style="background: gray">
        <svg x="200" y="200">
          <circle cx="50" cy="50" r="50" style="fill: red" />
        </svg>
        <circle cx="50" cy="50" r="50" style="fill: yellow" />
      </svg>
    </>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

谢谢！

不能将CSS上的SVG图像堆叠在一起？

0 个答案: