html width 속성을 계산하는 방법이 있습니까?

Question

HTML 너비 속성에 계산이 가능한지 궁금합니다. 다음과 같음 :

<SVG width="100%-10px"> 

또는 동일한 CSS 해결 방법은 무엇입니까?

Answer 1

나는 당신이 찾고있는 것은 예는 CSS CALC() 함수 여기 http://www.w3schools.com/cssref/func_calc.asp

입니다 생각 당신은 +로 수식을 사용할 수 있습니다

width: calc(100% - 10px); - */

Answer 2

calc() 이를 위해 잘 작동합니다 :

svg { 
 
    background-color: red; 
 
    width: calc(100% - 200px); 
 
}

<svg></svg>

Answer 3

@Hunter가 제안한 것처럼, 당신은 calc()을 사용할 수 있지만 내가 때문에, 반대 권합니다 : 레이아웃이있을 수 있습니다 CALC() 표현식을 사용하여

인해 브라우저가 반올림 다르게 서브 픽셀을 처리하는 방식에 예기치 않은 결과.

소스 : 그것은 모든 브라우저에서 동일하게 보일 것이다 모든 것을 보장하기 위해 그 동적해야하는 경우 http://caniuse.com/#feat=calc가

그냥 자바 스크립트를 사용합니다.

HTML :

<div class="parent"> 
    <svg class="dynamic-width"></svg> 
</div> 

JS : 영업 이익이`, IE 8, 오페라 미니를 지원 CALC를 곱셈이나 나눗셈 (이전 안드로이드 버전에서 지원되지 않습니다)를 사용하여 계획이다

var parent = document.getElementsByClassName('parent')[0]; 
var pixelsToSubtract = 10; 
var svg = document.getElementsByClassName('dynamic-width')[0]; 
svg.style.width = parent.getBoundingClientRect().width - 10 + 'px';