스타일 구성 요소와 CSS의 ATTR()를 사용

Question

내가 지금처럼 CSS 내용 attr 기능을 사용하여 SVG 원 내부 백분율 수치를 넣어려고 :

는

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

Answer 1

퍼센트 기호는 문자열을하고 그래서 같이 ATTR() 값을 분리 할 필요가 : 데이터 대신 CSS 스타일의 속성에

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

또는 그냥 퍼센트 기호를 넣어

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>