SVG 캔버스를 배치하는 방법

Question

페이지에 SVG 요소를 배치하는 방법을 알지 못합니다. 나는 SVG의 뷰포트 안에 SVG 요소의 내부 내용을 위치시키는 것에 대한 Sara Soueidan 튜토리얼을 읽는 데 시간을 보냈지 만 페이지에서 뷰포트를 배치하는 방법은 어디에서도 찾을 수 없습니다. 나는 DIV 안에 내 SVG를 포장하고 (아무 소용이) 사업부 부동 시도 :

<div id="svg-left"> 
    <svg id="angle-left" class="angle" xmlns="http://www.w3.org/2000/svg" width="512px" height="512px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"> 
    <polygon points="352,115.4 331.3,96 160,256 331.3,416 352,396.7 201.5,256 "/> 
    </svg> 
</div> 

이 같은 간단한 개념처럼 보이지만, 난 아무 대답을 찾을 수 없습니다.

Answer 1

<svg> 요소는 다른 HTML 요소와 동일하게 배치 할 수 있습니다. 당신은 등

, 절대 위치를 사용하고, 부동 수 있습니다 여기 데모는 다음과 같습니다

#angle-left 
 
{ 
 
    float: right; 
 
} 
 

 
#angle-left2 
 
{ 
 
    position: absolute; 
 
    left: 200px; 
 
    bottom: 100px; 
 
}

<svg id="angle-left" class="angle" xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" viewBox="0 0 512 512"> 
 
    <polygon points="352,115.4 331.3,96 160,256 331.3,416 352,396.7 201.5,256 "/> 
 
</svg> 
 

 
<svg id="angle-left2" class="angle" xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" viewBox="0 0 512 512"> 
 
    <polygon points="352,115.4 331.3,96 160,256 331.3,416 352,396.7 201.5,256 "/> 
 
</svg>

는 (나는 위치가 더 분명하게하기 위해 SVGs의 화면 크기에 감소).