Shulou(Shulou.com)06/03 Report--

What are the document structure and related elements of SVG in HTML5? in view of 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.

Structure-related composition and reuse elements, here is a brief summary of the relevant elements in SVG's document structure, and then move on to other features of SVG.

The elements of an SVG document can be basically divided into the following categories:

Animation element: animate,animateColor,animateMotion,animateTransform,set

Explanatory element: desc,metadata,title

Graphic element: circle,ellipse,line,path,polygon,polyline,rect

Structural element: defs,g,svg,symbol,use

Gradient element: linearGradient,radialGradient

Other elements: a quotient altGlyphDefrection clipPathrecoveryColorProfilePhillips cursorrectionFilterParticipationFontLichley facewagerforeignObjectforceforgObjectforeignObjectMagi imageMagi MakkerGradeMascriptPowerStylePartitureview and so on.

Graphic elements, gradient elements, text, image elements and combinations have been introduced, and several other structure-related elements are introduced below.

Windows-svg element

You can place any other element in any order in the svg element, including nested svg elements.

The attributes supported by the svg element are commonly used id,class,x,y,width,height,viewBox,preserveAspectRatio, as well as related attributes of fill and stroke.

The events supported by the svg element are also commonly used onload,onmouseover,onmousemove,onmousedown,onmouseup,onclick,onfocusin,onfocusout,onresize,onscroll,onunload and so on. There is no more to say about the svg element. For a complete list of attributes and events, see the official documentation below.

Explanatory element-desc element and title element

Each container element (element that can contain other container elements or graphical elements, such as: aforce defsforce Glyphreg Marker symbol) and graphic elements can contain desc and title elements, both of which are auxiliary elements used to interpret the relevant context; their content is text. When the SVG document is rendered, these two elements are not rendered into the drawing. There is not much difference between these two elements, and title appears as a prompt in some implementations, so title is usually placed in the first place of the parent element.

Typical uses are as follows:

The code is as follows:

Companysalesbyregion

Thisisabarchartwhichshows

Companysalesbyregion.

In general, the outermost svg element is described with title so that the program is more readable.

Tag-marker element

Tags define graphical elements (arrows and multipoint markers) attached to one or more vertices (vertices of path,line,polyline or polygon). Arrows can be done by appending a tag to the beginning or end of a path,line or polyline. Multipoint markers can append a tag to all vertices of path,line,polyline or polygon.

The tag is defined by the marker element, and then set the relevant attributes (marker,marker-start,marker-mid, and marker-end) in path,line,polyline or polygon. Look at an example:

The code is as follows:

Placinganarrowheadattheendofapath.

Let's take a closer look at the relevant knowledge of marker:

1.marker is a container element, which can store any order of graphic elements, container elements, animation, gradient elements, and so on.

The 2.marker element creates a new window: sets the value of viewBox.

The more important attributes of 3.marker:

MarkerUnits= "strokeWidth | userSpaceOnUse"

This property defines the coordinate system used by the contents of the properties markerWidth,markerHeight and marker. This property has two optional values, and the first value, strokeWidth, is the default value, which represents that the units of the coordinate system used by the contents of the attributes markerWidth,markerHeight and marker are equal to the value of the stroke-width setting of the graphic element that references the marker.

For example, in the above example, the width of the marker element is 400 and the height is 300, but don't be confused, the path in the mark element uses the new user coordinate system set by viewBox.

The attribute also takes a value of userSpaceOnUse, which represents the contents of the attributes markerWidth,markerHeight and marker using the coordinate system of the graphical element that references the marker.

RefX,refY: defines the location coordinates where the referenced point is aligned with the marker. For example, in the above example, the referenced point is the end point, and you want to align it to the (0p5) position of the marker. Note that refX,refY uses the end-user coordinate system transformed by viewBox.

The width and height of the markerWidth,markerHeight:marker window is easy to understand.

Orient: defines the angle at which the marker rotates. You can specify an angle or assign an auto directly.

Auto rotates in the positive direction of the x-axis according to the following rules:

a. If the point where the marker is located belongs to only one path, the positive x-axis of the marker is the same as that of the path. See the example above.

b. If the point where the marker is located belongs to two different path, the positive direction of the x-axis of the marker coincides with the bisector of the angle between the two path.

4. The marker attribute of a graphic element

Graphic elements need to use relevant attributes to reference a marker, mainly these three: marker-start (put the referenced marker to the starting point), marker-mid (put the referenced marker to all points except the starting point and end point), and marker-end (put the referenced marker to the end point). The values of these three attributes may be none (for not referring to marker), a reference to marker (referencing a marker), and inherit (needless to say).

You can also see the use of marker from the above example.

Script and style-script element and style element

In fact, virtually all attributes (not just text for all elements) can be associated with an element using CSS, and all CSS attributes are available in the SVG image. You can style elements directly with style attributes, or you can refer to style sheets to style elements. Stylesheets should not be parsed for XML files (because they occasionally contain characters that cause problems), so you need to place them in the XMLCDATA section. The same goes for scripts, which need to be placed in the XMLCDATA section. Take a look at the following CSS example:

The code is as follows:

Text

Colorscanbespecified

Bytheir

R

G

Bvalues

Orbykeywordssuchas

Lightsteelblue

Let's take another look at the example of the script:

The code is as follows:

Scriptingtheonclickevent

Conditional processing-switch element

Conditional processing attributes are attributes that control whether the element is rendered or not. Basically, most elements, especially graphic elements, can specify conditional processing attributes. There are three conditional processing properties: requiredFeatures,requiredExtensions and systemLanguage. These properties are a set of tests that allow you to specify a list of values (the first two properties are separated by spaces and the language attribute is separated by commas) and the default value is true.

The switch element of SVG provides the ability to render according to specified conditions. The switch element is a container element, which can contain graphic elements, explanatory elements, animation elements, and aMagint foreignObjectGramgMagical imageDifferentsvgMagnedswitchJournal textuse and other elements. The switch element checks the conditional processing attributes of the direct child elements sequentially, then renders the first child element that meets its own criteria, and the other child elements are ignored. These attributes, like display attributes, only affect the rendering of elements that use these attributes directly, not referenced elements (such as those referenced by use). To put it simply, these three attributes will affect elements such as defs,cursor,mask,clipPath,pattern, etc. (these elements are not renderable or refer to other elements).

Note: the values of the display and visibility attributes of the child elements do not affect the result of conditional judgment of the switch element.

For the list of values of conditional processing attributes, please see the official documentation. Here is a small example:

The code is as follows:

The simple meaning of this example is: if you are using a browser that supports the filter feature, draw the upper rectangle (with the filter attribute), and if the filter feature is not supported, draw the lower rectangle.

In fact, more often than not, the attribute used is systemLanguage, which is the multilingual processing ability of the text. For example:

The code is as follows:

De-HAHA

En-

This is the answer to the question about the document structure and related elements of SVG 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 for more related knowledge.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.