HTML 페이지를 SVG에 삽입하는 다양한 방법

<svg> 태그를 사용하여 웹 페이지에 컨텐츠를 직접 삽입하고 DOM의 일부가 된 다음 CSS 및 JS를 사용하여 제어 할 수 있습니다.

간단한 원 :

 <svg width = 400 heihgt = 300 id = testsvg> <circle cx = 100 cy = 100 r = 50 채우기 = 빨간색 스트로크 = 검은 스트로크-width = 2 id = testcircle> </circle> </svg> // svg 스타일을 제어하기 위해 CSS를 사용할 수는 있지만, 명령은 텍스트/cs> # # # #ttsvg <텍스트/css>와 다를 수 있습니다. solid #ccc;} #testsvg circle {fill : 빨간색; 뇌졸중 : 파란색; 뇌졸중 범위 : 3; } </style> // js를 사용하여 svg를 작동하고 간단한 애니메이션 등을 만들 수 있습니다. <script type = text/javaScript> var circle = document.getElementById (testCircle); Circle.AddeventListener (클릭, 함수 (e) {console.log (클릭 서클 ...); Circle.SetAttribute (r, 65);}; </script> // JS를 사용하는 것 외에도 SVG의 자체 애니메이션을 사용할 수 있습니다. <animate accributeName = cx from = 100 ~ = 300 dur = 2s repeatCount = indefinite> </animate> </circle> </svg>

디스플레이 효과 :

<img> <embed> <object> <iframe> 및 기타 태그를 사용하여 SVG 파일을 웹 페이지에 삽입 할 수 있습니다.

<img> 제외하고 이중 태그를 사용해야합니다.

 // <Img> tag <img src = test.svg '/> 또는 base64 svg <img src = data : image/svg+xml; base64, [data]/> // <embed> tag <embed id = embedsvg type = image/svg+xml src = test.svg>//embg>//embg>/embed>를 사용합니다. domvar embedsvg = document.getElementByid (embedsvg) .getSvgdocument (); console.log (svg dom :, embedsvg); // <botort> tag <object id = objectsvg type = image/svg+xml data = test.svg> </object> // get svar vertsvar document.getElementByid (ObjectSVG) .getSvgDocument (); console.log (svg dom :, objectsvg); // <iframe> tag <iframe id = iframesvg src = test.svg> </iframe> // get svg domvar iframesvg = document.getElementByid (iframesvg) .ContentDocument; console.log (svg dom :, iframesvg);

SVG DOM 출력 :

다른 웹 페이지 요소의 배경 이미지로 SVG 사용

이것은 SVG를 웹 페이지에 삽입하는 위장한 방법입니다. 즉, SVG를 일반 사진으로 사용하고 애니메이션 효과를 표시 할 수 없습니다.

 <스타일 유형 = text/css> .svg-div {너비 : 400px; 높이 : 300px; 배경 : URL (test.svg) no-repeat center/50%; 테두리 : 1px solid #ccc;} </style> <div class = svg-div> </div>

효과:

SVG 파일은 본질적으로 XML 텍스트 조각이므로 XML 코드를 읽어 SVG 소스 코드를 읽을 수 있습니다.

 var svgstr = new xmlserializer (). serializetoString (document.getElementById (testsvg)); console.log (svgstr);

이것은 HTML 페이지에 SVG를 삽입하는 다양한 방법에 대한이 기사의 끝입니다. 보다 관련성이 높은 HTML SVG 컨텐츠 삽입은 wulin.com의 이전 기사를 검색하거나 아래 관련 기사를 계속 탐색하십시오. 나는 모두가 앞으로 Wulin.com을 지원하기를 바랍니다!