<!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> <LinearGradient id="verticallineargradient" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" stop-color="red"></stop> <stop offset="100%" stop-color="blue"></stop> </LinearGradient> </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(#verticallineargradient)"/> </svg> </body> </html>
Related: - HTML5 svg: radialGradient vs linearGradient
No comments:
Post a Comment