SVG: draw cat
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>svg draw cat</title> <meta name="Description" content="geovindu"/> <meta name="Keywords" content="geovindu"/> <meta name="author" content="geovindu"/> <script src="ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script> <link rel='stylesheet' href='bootstrap/3.4.1/css/bootstrap.min.css'> <style type="text/css"> svg .catsvg{ width: 140px; height: 170px; } #geovindu{ background-image: url("cat.svg"); background-size: 140px 170px; height: 170px; } </style> </head> <body> <div class="container"> <div class="row"> <svg id="catsvg" class="catsvg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>Cat</title> <desc>Stick Figure of a Cat</desc> <circle cx="70" cy="95" r="50" style="stroke: black; fill: none;"/> <circle cx="55" cy="80" r="5" stroke="black" fill="#339933"/> <circle cx="85" cy="80" r="5" stroke="black" fill="#339933"/> <g id="whiskers"> <line x1="75" y1="95" x2="135" y2="85" style="stroke: black;"/> <line x1="75" y1="95" x2="135" y2="105" style="stroke: black;"/> </g> <use xlink:href="#whiskers" transform="scale(-1 1) translate(-140 0)"/> <!-- ears --> <polyline points="108 62, 90 10, 70 45, 50, 10, 32, 62" style="stroke: black; fill: none;" /> <!-- mouth --> <polyline points="35 110, 45 120, 95 120, 105, 110" style="stroke: black; fill: none;" /> </svg> </div> <div class="row"> <img src="cat.svg" title="geovindu" alt="Geovin Du"/> </div> <div class="row"> <div id="geovindu"></div> </div> <div class="row"> <object data="cat.svg" type="image/svg+xml" title="cat object" alt=""> <p>no svt support!</p> <img src="cat.svg" title="geovindu draw cat svg"/> </object> </div> </div> </body> </html>
cat.svg:
<!--Scalable Vector Graphic--> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="140px" height="170px" viewBox="0 0 140px 170px"> <title>Cat</title> <desc>Stick Figure of a Cat</desc> <circle cx="70" cy="95" r="50" style="stroke: black; fill: none;"/> <circle cx="55" cy="80" r="5" stroke="black" fill="#339933"/> <circle cx="85" cy="80" r="5" stroke="black" fill="#339933"/> <g id="whiskers"> <line x1="75" y1="95" x2="135" y2="85" style="stroke: black;"/> <line x1="75" y1="95" x2="135" y2="105" style="stroke: black;"/> </g> <use xlink:href="#whiskers" transform="scale(-1 1) translate(-140 0)"/> <!-- ears --> <polyline points="108 62, 90 10, 70 45, 50, 10, 32, 62" style="stroke: black; fill: none;" /> <!-- mouth --> <polyline points="35 110, 45 120, 95 120, 105, 110" style="stroke: black; fill: none;" /> </svg>
from:
http://oreillymedia.github.io/svg-essentials-examples/
https://github.com/hyperpc/SVGEssentials
https://sarahdrasnerdesign.com/
https://css-tricks.com/learn-design-for-developers-and-svg-animation-with-sarah-drasner-%e2%9c%a8%f0%9f%92%96/
https://www.oreilly.com/catalog/errata.csp?isbn=0636920032335
https://www.oreilly.com/library/view/svg-animations/9781491939697/
https://www.oreilly.com/library/view/svg-essentials-2nd/9781491945308/
哲学管理(学)人生, 文学艺术生活, 自动(计算机学)物理(学)工作, 生物(学)化学逆境, 历史(学)测绘(学)时间, 经济(学)数学金钱(理财), 心理(学)医学情绪, 诗词美容情感, 美学建筑(学)家园, 解构建构(分析)整合学习, 智商情商(IQ、EQ)运筹(学)生存.---Geovin Du(涂聚文)