We can define path in HTML5 svg. Here is a example:
where:
- d stand for data
- M: moveto
- L: lineto
- Q: quadratic curve
- Z: close path
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: HTML5 svg LinearGradient</title>
</head>
<body>
<h1>Mobile-Web-App: HTML5 Scalable Vector Graphics (svg)</h1>
<svg width="400" height="300">
<rect x="0" y="0" width="400" height="300" stroke="black" stroke-width="1" fill="white" />
<def>
<path d="M50, 50
L100, 50
L100, 100
L50, 100 Z" id="path1" fill="green"></path>
</def>
<use xlink:href="#path1"
fill="none"
stroke="#ff0000"
stroke-linejoin="round"
stroke-width="5px"/>
<path d="M100, 150
L350, 150
L350, 250
L100, 250" id="path2" fill="blue" stroke="#000000" stroke-width="10px"></path>
<path d="M200, 0
L200, 50
Q250, 50, 300, 100
Q350, 100, 350, 0 Z"
fill="red" stroke="#000000" stroke-width="5px"></path>
</svg>
</body>
</html>
No comments:
Post a Comment