SVG

Question

我试图在图片上制作动画时遇到问题。

复选框由SVG路径和rect使用样式化组件构成。这是蓝色填充的代码：

import styled from "styled-components";

export const BoxFill = styled.rect.attrs({
  x: 0,
  y: 0,
  rx: 0,
  ry: 0,
  width: "100%",
  height: "100%",
})`
  fill: transparent;
  rx: 80%;
  ry: 80%;
  x: 50%;
  y: 50%;

  width: 0;
  height: 0;
  transition: all ${transition.release}; // disappear

  ${Label}:hover > ${Input}:checked + ${Box} & {
    fill: ${({ theme: { checkbox } }) => checkbox.selectedHoverBoxBackground};
  }

  ${Input}:checked + ${Box} & {
    fill: ${({ theme: { checkbox } }) => checkbox.selectedBoxBackground};
    width: 100%;
    height: 100%;
    rx: 0;
    ry: 0;
    x: 0;
    y: 0;
    transition: all ${transition.press}; // appear
  }

  ${Input}:checked[disabled] + ${Box} & {
    fill: ${({ theme: { checkbox } }) => checkbox.selectedDisabledBoxBackground};
  }
`;

所以现在它适用于Chrome，Firefox等。但Safari似乎首先采用属性（rx，ry）并在样式中忽略它们，即使它们已被声明。结果我总是得到一个尖锐的填充。这在IE 11中保持不变（虽然动画在这里不起作用，但是现在我不介意）。这种情况不合适。 如果我在第一个位置将属性（rx，ry）设置为80％，那么Safari中的动画就是我所期望的，但在EI中，我得到了这张照片。这些白洞在一个盒子里。

我希望它能像第二个Safari的情况一样工作，但却无法研究这种行为的原因。