javascript - 将 CSS attr() 与样式化组件一起使用

Question

我正在尝试使用 css content attr 函数将百分比数字放在 svg 圆圈内，如下所示:

内容:attr(data-percent)%;

伪元素不会呈现，因为 Styled 组件似乎无法处理末尾的 %。如果我删除它，它会起作用，但我希望数字显示为 20% 并且此格式对常规 CSS 有效。

我在这里遗漏了什么还是图书馆的限制？

const Div = styled.div`
  position: relative;
  width: 100%;
  height: 100%;
  &:after {
    content: attr(data-percent)%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
`;

render() {
    return (
      <Div data-percent={20}>
        <sgv viewBox="0 0 120 120">
          <circle cx="60" cy="60" r="50" fill="none" strokeWidth="10" strokeLinecap="round"/>
        </svg>
      </Div>
    );
  }

Answer 1

百分号需要是一个字符串并与 attr() 值分开，如下所示:

content: attr(data-percent) "%";

或者只是将百分号放入数据属性而不是css样式

data-percent="20%"

演示

div {
  position: relative;
  width: 100%;
  height: 100%;
}

div:after {
  content: attr(data-percent) "%";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<div data-percent="20">
  <svg viewBox="0 0 120 120">
    <circle cx="60" cy="60" r="50" fill="none" strokeWidth="10" strokeLinecap="round" />
    </svg>
</div>