Использование CSS attr() со стилизованными компонентами

Я пытаюсь поместить процентную цифру внутри круга svg, используя функцию css content attr, например:

content: 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>
    );
  }

reactjs javascript css styled-components css-content
person D-Money    schedule 05.10.2017    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Знак процента должен быть строкой и отделен от значения 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>

person Patrick Evans    schedule 05.10.2017