How to operate SVG DOM and DOM in HTML5

What is the operation of SVG DOM and DOM in HTML5? in order to solve this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible method.

The use of scripts can easily complete a variety of complex tasks, but also a mainstream way to complete animation and interaction. Because SVG is an element of html, ordinary DOM operations are supported, and because SVG is essentially an xml document, there is also a special DOM operation, mostly called SVG DOM. Of course, since IE currently doesn't support SVG, developing IE-based SVG pages requires a different approach. This part of the knowledge is actually very familiar to everyone, the following is just a simple look.

DOM actions in HTML pages

DOM should be familiar to all of you. Here's a small example:

The code is as follows:

# svgContainer {

Width: 400px

Height: 400px

Background-color: # a0a0a0

}

Function CreateSVG () {

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

Var boxWidth = 300

Var boxHeight = 300

Var svgElem = document.createElementNS (xmlns, "svg")

SvgElem.setAttributeNS (null, "viewBox", "0" + boxWidth + "" + boxHeight)

SvgElem.setAttributeNS (null, "width", boxWidth)

SvgElem.setAttributeNS (null, "height", boxHeight)

SvgElem.style.display = "block"

Var g = document.createElementNS (xmlns, "g")

SvgElem.appendChild (g)

G.setAttributeNS (null, 'transform',' matrix)

/ / draw linear gradient

Var defs = document.createElementNS (xmlns, "defs")

Var grad = document.createElementNS (xmlns, "linearGradient")

Grad.setAttributeNS (null, "id", "gradient")

Grad.setAttributeNS (null, "x1", "0%")

Grad.setAttributeNS (null, "x2", "0%")

Grad.setAttributeNS (null, "Y1", "100%")

Grad.setAttributeNS (null, "Y2", "0%")

Var stopTop = document.createElementNS (xmlns, "stop")

StopTop.setAttributeNS (null, "offset", "0%")

StopTop.setAttributeNS (null, "stop-color", "# ff0000")

Grad.appendChild (stopTop)

Var stopBottom = document.createElementNS (xmlns, "stop")

StopBottom.setAttributeNS (null, "offset", "100%")

StopBottom.setAttributeNS (null, "stop-color", "# 0000ff")

Grad.appendChild (stopBottom)

Defs.appendChild (grad)

G.appendChild (defs)

/ / draw borders

Var coords = "M 0,0"

Coords + = "l 0300"

Coords + = "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, 'stroke-width', 10)

Path.setAttributeNS (null, 'stroke-linejoin', "round")

Path.setAttributeNS (null, 'dumped, coords)

Path.setAttributeNS (null, 'fill', "url (# gradient)")

Path.setAttributeNS (null, 'opacity', 1.0)

G.appendChild (path)

Var svgContainer = document.getElementById ("svgContainer")

SvgContainer.appendChild (svgElem)

}

Click on this text to show the number of child

Elements of the root element.

In this example, the common ways to get DOM objects are listed:

1. Get the object through methods such as document.getElementById or document.getElementByClassName

two。 Get the document object through document.documentElement or document.rootElement

3. Get the object that generated the event through the event parameter evt.target. The advantage of this approach is that you can get the object that generated the event without using id.

The rest of the scripts are basically the same as normal DOM.

This is the answer to the question about the operation of SVG DOM and DOM in HTML5. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel to learn more about it.