Question

我尝试使用css内容attr函数将百分比数字放入svg圈内，如下所示：

content: attr(data-percent)%;

伪元素不会渲染，因为样式化组件似乎无法在最后处理%。如果我删除它可行，但我希望数字显示为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%"

演示

＆＃13;

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

＆＃13;

<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>

＆＃13;

将CSS attr（）与样式化组件一起使用

1 个答案: