Várias maneiras de inserir uma página HTML em um SVG

SVG (Gráfico de vetor escalável) é um formato de imagem vetorial escalável com base na sintaxe XML. Outros formatos de imagem são baseados no processamento de pixels, enquanto o SVG é uma descrição da forma da imagem, por isso é essencialmente um arquivo de texto, com um tamanho relativamente pequeno e não será distorcido quando ampliado.

Insira tags SVG

Use a tag <svg> para inserir o conteúdo diretamente na página da web, tornar parte do DOM e, em seguida, você pode usar CSS e JS para controle.

Um círculo simples:

 <svg width = 400 heihgt = 300 id = testsvg> <círculo cx = 100 cy = 100 r = 50 preenchimento = acidente vascular cerebral preto width = 2 id = testcircle> </circle> </svg> // pode usar css para controlar o estilo de svg, mas os atributos são diferentes de webrinar sólido #ccc;} #testsvg círculo {preenchimento: vermelho; AVC: azul; largura de derrame: 3; } </style> // você pode usar o JS para operar SVG, criar animações simples, etc. <Script Type = text/javascript> var circ = document.getElementById (testCircle); circ.addeventListener (clique, function (e) {console.log (clique em círculo ...); círculo.setAttribute (r, 65);}, false); </script> // Além de usar Js, você pode usar o próprio SVG para criar efeitos de animação <svg cx = 400 altura = 10000 ids = 300 IDSV = TESTST = TESTST = TESTC) <Animate AttributEname = cx de = 100 a = 300 dur = 2s repeatCount = indefinite> </anima> </círculo> </svg>

Efeito de exibição:

Insira o arquivo SVG

Você pode usar <img> <embed> <object> <iframe> e outras tags para inserir arquivos SVG nas páginas da web.

Exceto para <img> , a tag dupla deve ser usada.

 //Use the <img> tag <img src=test.svg' />//or the base64 encoding of SVG <img src=data:image/svg+xml;base64,[data] />//Use the <embed> tag <embed id=embedSvg type=image/svg+xml src=test.svg></embed>//Get SVG Domvar incorpSvg = document.getElementById (incorpEsvg) .getsvgDocument (); console.log (svg dom: odedsvg); // use o <ject> tag <object id = objectSvg type = image/svg+xml data = test.svg> </object> // Document.getElementById (ObjectsVG) .GetSvgDocument (); console.log (SVG DOM :, Objectsvg); // Use o <frame> tag <iframe id = ifmeramesvg src = test.svg> </frame> // obtém svg domvar se se document.getElementById (iframesvg) .contentDocument; console.log (svg dom :, iframesvg);

Saída SVG DOM:

Use SVG como imagem de fundo para outros elementos da página da web

Esta é uma maneira disfarçada de inserir SVG em uma página da web, ou seja, usar o SVG como uma imagem comum e não pode exibir efeitos de animação.

 <style type = text/css> .svg-div {width: 400px; altura: 300px; background: url (test.svg) no centro de repetição/50%; borda: 1px sólido #ccc;} </style> <div class = svg-div> </div>

Efeito:

Leia o código -fonte SVG

Como o arquivo SVG é essencialmente uma parte do texto XML, o código -fonte SVG pode ser lido lendo o código XML.

 var svgstr = new xmlSerializer (). Serializetostring (document.getElementById (testsvg)); console.log (svgstr);

Resumir

Este é o fim deste artigo sobre as várias maneiras de inserir SVG nas páginas HTML. Para obter um conteúdo SVG HTML mais relevante, pesquise artigos anteriores do Wulin.com ou continue navegando nos artigos relacionados abaixo. Espero que todos apoiem o Wulin.com no futuro!