SVG 的绝对定位导致内部路径元素移动到其包含元素之外

Posted 2023-03-16

【中文标题】SVG 的绝对定位导致内部路径元素移动到其包含元素之外

【英文标题】：Absolute positioning of SVG causes the inner path elements to move outside their containing element

【发布时间】：2020-01-08 22:13:16

【问题描述】：

我有一个简单的 CollapseIcon React 组件，它本质上是由 Circle 样式组件包裹的两个 SVG 路径（形成一个箭头）。

它在我将它放在页面上的任何位置都可以完美运行...除非我选择使用 postion: absolute 来放置它。例如，我需要将它对齐在其容器的右上角。我尝试了position: absolute（与top: 0 和right: 0），我还尝试了float: right 与margin-top: -50px。在这两种情况下，箭头都迁移到了圆形边界之外。

这是图标的简化 React 代码：

return (
      <Circle  justify="center" alignItems="center"
          onClick=toggleSelect
          name="collapse"
          ...props
        >
          <Icon viewBox="0 0 18 10" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink"
            ...props
          >
            <g id="Style-Guide" strokeWidth="1" fill="none" fillRule="evenodd" strokeLinecap="round">
              <g id="Style-Guide---Elements" transform="translate(-198.000000, -3941.000000)" stroke="#686868" strokeWidth="2">

                <RotateGroup ...props id="Collapse-Arrow-Small">
                  <Path ...props d="M0.727272727,7.33333333 L8.03627318,0.633416253" id="Line-2"></Path>
                  <Path ...props d="M8,7.33333333 L15.3090005,0.633416253" id="Line-2-Copy" transform="translate(11.636364, 4.000000) scale(-1, 1) translate(-11.636364, -4.000000) "></Path>
                </RotateGroup>
              </g>
            </g>
          </Icon>
        </Circle>
    )

const Circle = styled(FlexContainer)`
  width: 32px;
  height: 32px;
  border-radius: 18px;
  border: 2px solid $colors.primary700;

const Path = styled.path`
  fill: none;
  stroke: $colors.primary700;
`;

const Icon = styled.svg`
  width: 18px;
  height: 10px;

  &:disabled $Path 
    stroke: $colors.primary300;
  
`

这就是我试图放置图标的位置：

  <Section flexDirection="column">
    <SectionTitle>My Food Preferences</SectionTitle>
    <Collapsible trigger=<StyledCollapseIcon/>>
      <FoodPrefsForm />
    </Collapsible>
  </Section>

const StyledCollapseIcon = styled(CollapseIcon)`
  position: absolute;
  top: 0;
  right: 0

  $'' /* float: right;
  margin-top: -50px; */
`

【参考方案1】：

absolute 定位是绝对的，相对到最近的position: relative 祖先。给圈子position: relative 看看能不能解决问题。

CSS Tricks 有一个great article that explains this。

【讨论】：

Circle 组件是设置position: absolute 的 StyledCollapseIcon 组件的后代。但我尝试将所有后代设置为 position: relative 和 position: absolute ，但都没有帮助。