HTML5 SVG 2D Introdução 12 - Introdução às operações SVG DOM e DOM

Autor：Eve Cole Data da Última Atualização：2025-04-03 16:00:04

O uso de scripts pode facilmente concluir várias tarefas complexas e também é uma maneira convencional de concluir a animação e a interação. Como o SVG é um elemento de HTML, ele suporta operações DOM comuns. Como o SVG é essencialmente um documento XML, também há uma operação DOM especial, que é chamada principalmente de SVG DOM. Obviamente, como o IE não suporta o SVG atualmente, o desenvolvimento de páginas SVG com base no IE requer métodos diferentes. Todos estão muito familiarizados com essa parte do conhecimento, então vamos dar uma olhada brevemente abaixo.

Operações DOM nas páginas HTML

Todos devem estar familiarizados com Dom. Aqui está um pequeno exemplo:

<head>

#svgContainer {

Largura: 400px;

Altura: 400px;

Background-Color: #A0A0A0;

}

</style>

<Cript>

Função CreateSvg () {

var xmlns = "http://www.w3.org/2000/svg";

var largura de caixa = 300;

var boxHeight = 300;

var svgelem = document.createElementns (xmlns, "svg");

svgElem.setAttributen (null, "ViewBox", "0 0" + BoxWidth + "" + BoxHeight);

svgElem.setAttributen (null, "largura", largura de caixa);

svgElem.setAttributen (null, "altura", boxheight);

svgElem.style.display = "bloco";

var g = document.createElementns (xmlns, "g");

svgElem.appendChild (g);

G.SetAttributen (Null, 'Transform', 'Matrix (1,0,0, -1,0,300)');

// Desenhe gradiente linear

var defs = document.createElementns (xmlns, "defs");

var grad = document.createElementns (xmlns, "lineargradiente");

grad.setAtTributens (null, "id", "gradiente");

grad.setAtTributen (null, "x1", "0%");

grad.setAtTributen (null, "x2", "0%");

grad.setAtTributen (null, "y1", "100%");

grad.setAtTributens (null, "y2", "0%");

var stoptop = document.createElementns (xmlns, "stop");

stoptop.setAttributen (null, "offset", "0%");

stoptop.setAttributen (null, "stop-color", "#ff0000");

grad.appendChild (Stoptop);

var stopbottom = document.createElementns (xmlns, "stop");

stopbottom.setAttributen (null, "offset", "100%");

stopbottom.setAttributen (null, "stop-color", "#0000ff");

grad.appendchild (StopBottom);

defs.appendChild (grad);

G.AppendChild (DEFS);

// Desenhe fronteiras

var coordenates = "m 0, 0";

coordenadas += "l 0, 300";

coordenadas += "l 300, 0";

coords += "l 0, -300";

coords += "l -300, 0";

var path = document.createElementns (xmlns, "path");

Path.SetAtTributens (Null, 'Stroke', "#000000");

Path.SetAtTributens (Null, 'Width Width', 10);

Path.SetAtTributen (NULL, 'Stroke-linejoin', "Round");

Path.SetAtTributens (null, 'd', coordenadas);

Path.SetAtTributens (NULL, 'FILL', "URL (#Gradiente)");

Path.SetAtTributens (Null, 'Opacity', 1.0);

G.AppendChild (Path);

var svgContainer = document.getElementById ("svgContainer");

svgContainer.appendChild (svgelem);

}

</script>

</head>

</body>

Você descobriu isso? É exatamente o mesmo que a operação DOM dos elementos HTML comuns:

Selecione elemento: document.getElementById

Criar elemento: document.createElementns

Outra maneira de criar elementos infantis: element.createchildns

Adicionar elemento: node.appendChild

Defina o atributo do elemento: element.setAttributens/element.setAttribute

Além das operações acima, as seguintes operações e propriedades também são muito comuns:

Obtenha o valor do atributo do elemento: element.getAttributens/element.getAttribute

Verifique se existe um atributo em um elemento: element.hasattributens

Remova um atributo de um elemento: element.removeattributens

Elemento pai, elemento filho e nó de irmão: Element.parentNode/Element.FirstChild/Child.Nextsibling

Esses métodos não serão introduzidos em detalhes aqui; Além disso, a estrutura do nó da árvore Dom e a relação de herança entre objetos são semelhantes, para que não explique em detalhes. Os alunos que precisam se referirão à documentação para o objeto Core DOM abaixo.

No entanto, deve -se notar que o SVG é essencialmente um documento XML; portanto, o método DOM usa basicamente é um método com o NS terminando para fornecer namespaces relacionados; Se o namespace já for fornecido ao criar um elemento e não houver problema com vários espaços para names, ao definir os atributos relacionados, você também poderá optar por usar uma versão sem ns, como o uso do element.SetAttribute para definir o valor do atributo diretamente. No entanto, em geral, ainda é altamente recomendável usar uma versão com o final do NS, porque esta versão sempre funciona normalmente, mesmo no caso de vários namespaces.

Svg dom

Não encontrei nenhuma informação abrangente sobre isso e o DOM padrão. Atualmente, sei apenas que os métodos de atributos de atribuição são diferentes. Se você tiver algum aluno que entenda isso, me dê uma mensagem.

No exemplo acima, usamos element.setAttributens/element.setAttribute para atribuir valores aos atributos. No SVG DOM, podemos usar um método orientado a objetos para atribuir valores aos atributos do objeto através de pontos de acesso. Por exemplo, a seguir é uma comparação dos dois métodos:

Método DOM comum:

element.setAtAttribute ("X", "10");

element.setAtAttribute ("y", "20");

element.setAtAttribute ("Width", "100%");

element.setAtAttribute ("altura", "2em");

E Método SVG DOM:

element.x.baseval.value = 10;

element.y.baseval.value = 20;

element.width.baseval.newValuesPecifiedUnits (svglength.svg_lengthtype_percentage, 100);

element.Height.BaseVal.NewValuesPecifiedUnits (svglength.svg_lengthtype_ems, 10);

Os scripts DOM são scripts tradicionais e suas características são definir itens individuais construindo uma string de valor. A vantagem do estilo de script SVG DOM é que você não precisa criar seqüências de valores, para que o desempenho seja melhor que os scripts DOM.

Scripts incorporados em svg

Se você deseja adicionar scripts dentro do SVG, precisará usar elementos de script. Isso já foi mencionado antes. Além disso, é basicamente o mesmo que colocar scripts no HTML do lado de fora. Veja um exemplo:

<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-bransitional.dtd">

<head>

</head>

<Body>

<! [CDATA [

função showrectcolor () {

alert (document.getElementById ("mybluerect"). getAttributens (null, "preenchimento"));

}

função showrectarea (evt) {

var largura = parsefloat (evt.target.getAttributen (null, "width"));

var a altura = parsefloat (evt.target.getAttributen (null, "altura"));

alerta ("A área do retângulo é:" + (largura * altura));

}

função showroothildennr () {

alerta ("nr de crianças:"+document.documentElement.childnodes.length);

}

]]>

</script>

<texto x = "40" y = "100" onclick = "showRectColor ()"> Clique neste texto para mostrar a cor do retângulo. </sext>

<texto x = "40" y = "130"> Clique no retângulo para mostrar a área do retângulo. </sext>

<texto x = "40" y = "160" onclick = "showroothildrennr ()"> clique neste texto para mostrar o número de criança

<TSPAN X = "40" dy = "20"> elementos do elemento raiz.

</g>

</svg>

</body>

</html>

Neste exemplo, uma maneira comum de obter objetos DOM está listada :

1. Obtenha o objeto por meio de métodos como document.getElementById ou document.getElementByClassName;

2. Obtenha o objeto Document através do document.DocumentElement ou Document.RoOtelement;

3. Obtenha o objeto que gera o evento através do parâmetro de evento Evt.Target. A vantagem desse método é que você pode obter o objeto que gera o evento sem usar o ID.

O restante dos scripts é basicamente o mesmo que o DOM comum.

Referência prática:

Índice de script: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx

Centro de Desenvolvimento: https://developer.mozilla.org/en/svg

Referência popular: http://www.chinasvg.com/

Documento oficial: http://www.w3.org/tr/svg11/

DOM Core Object API: http://reference.sitepoint.com/javascript/document

Propriedades e métodos comuns do SVG DOM: http://riso.iteye.com/blog/393454, http://riso.iteye.com/blog/393459