2014-02-16 3 views
0

SVG transform attribute의 힘을 외부 SVG 파일에 적용하는 html5 구문은 무엇입니까?내장 된 svg 파일 변환

<!DOCTYPE html> 
<html> 
    <head> 
    <title>HTML5 SVG demo</title> 
    </head> 
    <body> 
    <div> 
     <img src="source.svg" style="border:1px solid black; width:20%; display: block; margin-left: auto; margin-right: auto;" /> 
    </div> 
    </body> 
</html> 

source.svg은 잉크 스케이프, 어떤 임의의 쓰레기와 A4 형식 페이지에서 생성되는 파일입니다

내가 지금 가지고있는 코드입니다.

이 이미지를 회전시키고 싶습니다 (이미지의 내용이 아니라 렌더링 된 HTML 문서에서 나타남). 처음에는 HTML 전용 구문에 관심이 있지만 나중에 JavaScript를 통해 이러한 속성을 조작 할 계획입니다.

답변

1

DIV에 HTML5 변환을 추가 할 수 있습니다. 그러나 SVG 자바 스크립트로 작업하는 것이 더 직관적 browsers..Much 사이의 이러한 글로브 아래,

어쨌든 모든 브라우저를위한 CSS 회전의 예입니다되는 TO의

<div style='-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);background-color:lightgreen;width:400px;height:400px;'> 
<svg id="mySVG" width="400" height="400">...</svg> 
</div>