<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
svg{background-color:white;}
#wing{fill:#81CCAA;}
#body{fill:#B8E4C2;}
#pupil{fill:#1F2600;}
#beak{fill:#F69C0D;}
.eye-ball{fill:#F6FDC4;}
#bird{transform: scale(1); }
#leaves{fill:#8CC63F;}
#bark{fill:#A27729;}
</style>
</head>
<body>
<svg width="1144.12px" height="900px" viewBox="0 0 572.06 200">
<!-- 将整个小鸟都包裹起来 -->
<g id="bird">
<!-- 将小鸟的身体用一个g标签包裹起来 -->
<g id="body">
<path d="M48.42,78.11c0-17.45,14.14-31.58,31.59-31.58s31.59,14.14,31.59,31.58c0,17.44-14.14,31.59-31.59,31.59
S48.42,95.56,48.42,78.11"/>
<path d="M109.19,69.88c0,0-8.5-27.33-42.51-18.53c-34.02,8.81-20.65,91.11,45.25,84.73
c40.39-3.65,48.59-24.6,48.59-24.6S124.68,106.02,109.19,69.88"/>
<path id="wing" d="M105.78,75.09c4.56,0,8.84,1.13,12.62,3.11c0,0,0.01-0.01,0.01-0.01l36.23,12.38c0,0-13.78,30.81-41.96,38.09
c-1.51,0.39-2.82,0.59-3.99,0.62c-0.96,0.1-1.92,0.16-2.9,0.16c-15.01,0-27.17-12.17-27.17-27.17
C78.61,87.26,90.78,75.09,105.78,75.09"/>
</g>
<!-- 将小鸟的头部用一个g标签包裹起来 -->
<g id="head">
<path id="beak" d="M50.43,68.52c0,0-8.81,2.58-10.93,4.86l9.12,9.87C48.61,83.24,48.76,74.28,50.43,68.52"/>
<path class="eye-ball" d="M60.53,71.68c0-6.33,5.13-11.46,11.46-11.46c6.33,0,11.46,5.13,11.46,11.46c0,6.33-5.13,11.46-11.46,11.46
C65.66,83.14,60.53,78.01,60.53,71.68"/>
<path id="pupil" d="M64.45,71.68c0-4.16,3.38-7.53,7.54-7.53c4.16,0,7.53,3.37,7.53,7.53c0,4.16-3.37,7.53-7.53,7.53
C67.82,79.22,64.45,75.84,64.45,71.68"/>
<path class="eye-ball" d="M72.39,74.39c0-2.73,2.22-4.95,4.95-4.95c2.73,0,4.95,2.21,4.95,4.95c0,2.74-2.22,4.95-4.95,4.95
C74.6,79.34,72.39,77.13,72.39,74.39"/>
</g>
</g>
<!-- <use> 标签的重用功能 use标签有3个参数，x代表要重用的那个画开始的位置的x的坐标向右的长度为x的位置，y代表要重用的那个画开始的位置的y的坐标向下的长度为y的位置，重用放的位置在要重用的画的开始的位置的边长为x和y的矩形的对角顶点上-->
<!-- <use x = "" y = "" xlink:href = ""/>
<!-在画布上画出另一只小鸟 -->
<use x= "100" y = "100" xlink:href = "#bird"/>
<!-- defs可以用来存储那些我们不想直接显示在页面上的内用,用defs来定义元件,不会直接渲染.这个隐藏的元件可以在后面被别的svg元素调用,这使得它非常适合用于绘制那些包含重用图像的图案。–>
<defs>
<!-- 1.首先设置好想要渐变的特效表 -->
<linearGradient id = "g1" x1="0" y1="0" x2="100%" y2="0" >
<stop offset = "0" stop-color = "#0f0"> </stop>
<stop offset = "50%" stop-color = "#f00"> </stop>
<stop offset = "100%" stop-color = "#00f"> </stop>
</linearGradient>
</defs>
<!-- 2.设置使用渐变的图形。并引入渐变表： -->
<rect width = "50" height = "10" x = "20" y = "30" fill = "url(#g1)"></rect>
<!-- 用defs组合的元件,初始元素的样式可以在新副本中被覆盖 -->
<defs>
<g id="tree">
<path id="bark" d="M91.33,165.51c0,0,4.18-27.65,1.73-35.82l-18.55-25.03l3.01-2.74l17.45,19.87l1.91-37.6h4.44l1.83,24.53
l15.26-16.35l3.27,4.36l-16.07,19.34c0,0-2.72,0-1.09,19.34c1.63,19.34,3,29.7,3,29.7L91.33,165.51z"/>
<g id="leaves">
<path class="leaf" d="M96.97,79.07c0,0-14.92,4.34-23.52-14.05c0,0,19.4-7.98,24.37,11.9c0,0-9.68-3.57-13.07-6.73
C84.75,70.2,91.82,77.99,96.97,79.07z"/>
<path class="leaf" d="M74.07,100.91c0,0-15.94-1.51-17.2-22.39c0,0,21.62-0.27,18.83,20.66c0,0-7.92-7.1-9.97-11.41
C65.73,87.77,69.55,97.92,74.07,100.91z"/>
<!-- ... -->
</g>
</g>
</defs>
<!-- 搭配use使用，想要什么样的都可以 -->
<use xlink:href = "#tree" x = "50" y = "10"/>
<use xlink:href = "#tree" x = "10" y = "-100"/>
<!-- <symbol>元素和<g>元素相似——它提供了一种对元素进行分组的方式。但是，它和分组元素有两个主要的不同： <symbol>元素不会被渲染。在这种方式中实际上它类似于<defs>元素。只有在use时才显示。 <symbol>元素可以有自己的viewBox和preserveAspectRatio属性。也就是它可以适应视窗，然后以你想要的任何方式渲染，而不是都按照默认的样式。 -->
</svg>
</body>
</html>
339
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
