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/

 

 

 

 

posted @ 2022-11-23 14:46  ®Geovin Du Dream Park™  阅读(48)  评论(0)    收藏  举报