1.17.1. SVG gradient ¶
A gradient is a smooth transition from one color to another. In addition, multiple color transitions can be applied to the same element.
There are two main types of SVG gradients:
Linear
Radial
1.17.2. SVG linear gradient- ¶ element is used to define a linear gradient. labels must be nested in the on the inside. the label is definitions , that defines special elements such as gradients A linear gradient can be defined as a horizontal, vertical, or angular gradient:
When y1 and y2 are equal, but x1 and x2 are different, a horizontal gradientcan be created.
When x1 and x2 are equal, but y1 and y2 are different, a vertical gradient can be created.
When x1 and x2 are different, and y1 and y2 are different, an angular gradient can be created.
1.17.3. Example 1 ¶
Define the oval shape of the horizontal linear gradient from yellow to red:
Here is the SVG code:Example ¶
<svgxmlns="http://www.w3.org/2000/svg"version="1.1"><defs><linearGradientid="grad1"x1="0%"y1="0%"x2="100%"y2="0%"><stopoffset="0%"style="stop-color:rgb(255,255,0);stop-opacity:1"/><stopoffset="100%"style="stop-color:rgb(255,0,0);stop-opacity:1"/>linearGradient>defs><ellipsecx="200"cy="70"rx="85"ry="55"fill="url(#grad1)"/>svg>
Code parsing:
-
id attribute of the tag defines a unique name for the gradient -
the X1 ~ X2 ~ X2 ~ Y1 ~ Y2 attribute of the tag definesthe start and end of the gradient. -
The color range of a gradient can be made up of two or more colors. Each color passes through a Label to specify. offset property isused to define the start and end positions of the gradient. -
Populate the attribute to ellipse elements are linked to this gradient
1.17.4. Example 2 ¶
Define an oval with a vertical linear gradient from yellow to red:
Here is the SVG code:
Example ¶
<svgxmlns="http://www.w3.org/2000/svg"version="1.1"><defs><linearGradientid="grad1"x1="0%"y1="0%"x2="0%"y2="100%"><stopoffset="0%"style="stop-color:rgb(255,255,0);stop-opacity:1"/><stopoffset="100%"style="stop-color:rgb(255,0,0);stop-opacity:1"/>linearGradient>defs><ellipsecx="200"cy="70"rx="85"ry="55"fill="url(#grad1)"/>svg>
1.17.5. Example 3 ¶
Define an oval, horizontal linear gradient from yellow to red and add text within the ellipse:
Here is the SVG code:
Example ¶
<svgxmlns="http://www.w3.org/2000/svg"version="1.1"><defs><linearGradientid="grad1"x1="0%"y1="0%"x2="100%"y2="0%"><stopoffset="0%"style="stop-color:rgb(255,255,0);stop-opacity:1"/><stopoffset="100%"style="stop-color:rgb(255,0,0);stop-opacity:1"/>linearGradient>defs><ellipsecx="200"cy="70"rx="85"ry="55"fill="url(#grad1)"/><textfill="#ffffff"font-size="45"font-family="Verdana"x="150"y="86">SVGtext>svg>
Code parsing:
-
element is used to add a text
-
1. Geographical Information Systems in the World Wide Web Era
4
-
2. Basic technology of WebGIS
4
-
3. Geographic Web Services
5
-
4. aggregation of geographical information
4
-
5. mobile GIS
5
-
6. Geographic information portal
3
-
7. New generation national spatial data infrastructure and GIS
4
-
8. Application of WebGIS in E-Commerce
3
-
9. Application of WebGIS in E-government
3
-
10. Hotspots and frontiers of WebGIS
2
-
1. Angularjs2
8
-
1. SVG tutorial
19
-
1. Memcached
20
-
1. C# tutorial
61
-
1. Sqlite
47
-
2. Go
43
-
2. Docker
59
-
2. Vue3
19
-
2. Servlet
21
-
3. React
23
-
3. SOAP tutorial
10
-
3. Android
18
-
3. Mongodb
44
-
3. Kotlin
18
-
4. Lua
31
-
4. MySQL tutorial
34
-
4. Appml
12
-
5. Perl
45
-
5. Postgresql
41
-
web
15
-
5. Web Services tutorial
6
-
6. Ruby
41
-
6. Design-pattern
35
-
7. Django
18
-
7. Rust
22
-
6. WSDL tutorial
8
-
8. Foundation
39
-
9. Ios
43
-
8. Css3
26
-
9. Swift
43
-
11. HTML tutorial-(HTML5 Standard)
54
-
12. Http
6
-
13. Regex
6
-
14. Regexp
7
Principles, Technologies, and Methods of Geographic Information Systems
102
In recent years, Geographic Information Systems (GIS) have undergone rapid development in both theoretical and practical dimensions. GIS has been widely applied for modeling and decision-making support across various fields such as urban management, regional planning, and environmental remediation, establishing geographic information as a vital component of the information era. The introduction of the “Digital Earth” concept has further accelerated the advancement of GIS, which serves as its technical foundation. Concurrently, scholars have been dedicated to theoretical research in areas like spatial cognition, spatial data uncertainty, and the formalization of spatial relationships. This reflects the dual nature of GIS as both an applied technology and an academic discipline, with the two aspects forming a mutually reinforcing cycle of progress.
-
1. Introduction to Geographic Information Systems
6
-
2. From the Real World to the Bit World
3
-
3. Spatial Data Model
7
-
4. Spatial Reference Systems and Map Projections
5
-
5. Data in GIS
4
-
6. Spatial data acquisition
2
-
7. Spatial Data Management
6
-
8. Spatial analysis
8
-
9. Digital Terrain Model (DTM) and Terrain Analysis
5
-
10. Spatial modeling and spatial decision support
6
-
11. Spatial data representation and map making
6
-
12. 3S Integration Technology
5
-
13. Network Geographic Information System
4
-
14. Examples of Geographic Information System Application
8
-
15. Organization and Management of Geographic Information System Application Projects
10
-
16. Geographic Information system Software Engineering Technology
7
-
17. Geographic Information System Standards
3
-
18. Geographic Information System and Society
3
-
19. Earth Information Science and Digital Earth
4
A linear gradient can be defined as a horizontal, vertical, or angular gradient: When y1 and y2 are equal, but x1 and x2 are different, a horizontal gradientcan be created. When x1 and x2 are equal, but y1 and y2 are different, a vertical gradient can be created. When x1 and x2 are different, and y1 and y2 are different, an angular gradient can be created. Define the oval shape of the horizontal linear gradient from yellow to red: Here is the SVG code: Code parsing: The color range of a gradient can be made up of two or more colors. Each color passes through a Populate the attribute to Define an oval with a vertical linear gradient from yellow to red: Here is the SVG code: Define an oval, horizontal linear gradient from yellow to red and add text within the ellipse: Here is the SVG code: Code parsing:
In recent years, Geographic Information Systems (GIS) have undergone rapid development in both theoretical and practical dimensions. GIS has been widely applied for modeling and decision-making support across various fields such as urban management, regional planning, and environmental remediation, establishing geographic information as a vital component of the information era. The introduction of the “Digital Earth” concept has further accelerated the advancement of GIS, which serves as its technical foundation. Concurrently, scholars have been dedicated to theoretical research in areas like spatial cognition, spatial data uncertainty, and the formalization of spatial relationships. This reflects the dual nature of GIS as both an applied technology and an academic discipline, with the two aspects forming a mutually reinforcing cycle of progress. definitions , that defines special elements such as gradients 1.17.3. Example 1 ¶
Example ¶
<svgxmlns="http://www.w3.org/2000/svg"version="1.1"><defs><linearGradientid="grad1"x1="0%"y1="0%"x2="100%"y2="0%"><stopoffset="0%"style="stop-color:rgb(255,255,0);stop-opacity:1"/><stopoffset="100%"style="stop-color:rgb(255,0,0);stop-opacity:1"/>linearGradient>defs><ellipsecx="200"cy="70"rx="85"ry="55"fill="url(#grad1)"/>svg>
offset property isused to define the start and end positions of the gradient. ellipse elements are linked to this gradient 1.17.4. Example 2 ¶
Example ¶
<svgxmlns="http://www.w3.org/2000/svg"version="1.1"><defs><linearGradientid="grad1"x1="0%"y1="0%"x2="0%"y2="100%"><stopoffset="0%"style="stop-color:rgb(255,255,0);stop-opacity:1"/><stopoffset="100%"style="stop-color:rgb(255,0,0);stop-opacity:1"/>linearGradient>defs><ellipsecx="200"cy="70"rx="85"ry="55"fill="url(#grad1)"/>svg>
1.17.5. Example 3 ¶
Example ¶
<svgxmlns="http://www.w3.org/2000/svg"version="1.1"><defs><linearGradientid="grad1"x1="0%"y1="0%"x2="100%"y2="0%"><stopoffset="0%"style="stop-color:rgb(255,255,0);stop-opacity:1"/><stopoffset="100%"style="stop-color:rgb(255,0,0);stop-opacity:1"/>linearGradient>defs><ellipsecx="200"cy="70"rx="85"ry="55"fill="url(#grad1)"/><textfill="#ffffff"font-size="45"font-family="Verdana"x="150"y="86">SVGtext>svg>
Principles, Technologies, and Methods of Geographic Information Systems
102