복잡한 매개 변수 fpr svg 태그 (CSS의 경우 analog calc())

Question

svg 태그로 복잡한 매개 변수를 설정할 수 있는지 알려주세요. CSS를 들어

는, 예를 들어, CALC() 명령이 :

<circle r = 'calc (50% - 2px)'> 

:

width: calc (50% - 10px); 

예를 들어 SVG에 대한이 같은 있나요?

Answer 1

짧은 대답은 "아니오"입니다. 적어도 현재는 크로스 브라우저 방식이 아닙니다.

그러나 아직 SVG2 표준 (브라우저에서 구현 중임)에서 r과 같은 지오메트리 특성은 CSS로 스타일을 지정할 수 있습니다.

크롬은이 기능을 구현했지만 (AFAIK) 유일한 기능입니다. 다음 예제는 Chrome에서 작동하지만 다른 브라우저에서는 작동하지 않습니다.

svg { 
 
    background-color: linen; 
 
}

<svg width="200" height="200"> 
 
    <circle cx="100" cy="100" style="r: calc(50% - 10px);" fill="red"/> 
 
</svg>