<!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" />
<defs>
<linearGradient id="horizontallineargradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#0ff"></stop>
<stop offset="100%" stop-color="#f00"></stop>
</linearGradient>
<radialGradient id="radialgradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,0,0)"/>
<stop offset="100%" style="stop-color:rgb(0,0,255)"/>
</radialGradient>
</defs>
<rect x="10" y="10" width="290" height="50" stroke="black" fill="url(#horizontallineargradient)"/>
<rect x="10" y="80" width="290" height="200" stroke="black" fill="url(#radialgradient)"/>
</svg>
</body>
</html>
Related:
- HTML5 svg:
LinearGradient - Horizontal vs Vertical
No comments:
Post a Comment