用svg绘制圣诞帽

最新推荐文章于 2021-02-04 05:22:53 发布

转载最新推荐文章于 2021-02-04 05:22:53 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/guwei4037/p/10172853.html

本文介绍了一种使用SVG技术在优快云用户头像上添加圣诞帽的方法，详细展示了SVG代码如何绘制帽子的各个部分，为读者提供了一个具体的实现案例。

今天是圣诞节，无意中看到csdn博客上面给我的头像带了个圣诞帽，比较好奇，想看看csdn是怎么实现的，果然用的是svg实现，不过代码有点冗长。

<html>
<body>
    <svg id="csdnc-memberhead" width="24" height="24" style="display: inline;">
        <path fill="#E40012" d="M.645 18.267l2.008-6.723 2.08-4.238L7.44 2.978l1.177-.993L14.032.406l2.9.293 1.515 1.455 2.24 4.331-1.6.572-1.589-2.271-.864-.412-1.274 1.742 5.634 8.82z"></path>
        <path fill="#EA6362" d="M8.617 1.985L13.356.186 16.961 0l.733.406 1.869 1.666 2.541 4.413-1.509-.106-2.289-4.091L16.592.812l-2.577.146z"></path><path fill="#6E0002" d="M10.354 3.243l3.953 2.076 1.061 2.166 1.7 2.459 1.658 3.031-1.501 1.565 3.987 3.147 2.163.58-1.664-2.633.64-1.489-1.567-2.179-.718-.645-.975-1.52-1.129-.948-1.358-2.87.03-1.609-.734-.336-3.714-1.036z"></path>
        <path fill="#FFF" d="M19.941 8.065l-1.987-1.282-.431-2.396 1.375-2.107 2.379-.583 1.987 1.282.43 2.396-1.376 2.108z"></path>
        <defs>
            <path id="a" d="M19.941 8.065l-1.987-1.282-.431-2.396 1.375-2.107 2.379-.583 1.987 1.282.43 2.396-1.376 2.108z"></path>
        </defs>
        <clipPath id="b">
            <use xlink:href="#a" overflow="visible"></use>
        </clipPath>
        <path clip-path="url(#b)" fill="#E7E7E8" d="M19.714 1.667l1.721.667L23.066 4.9s3.345 2.231 3.363 2.097c.019-.136-.98-5.429-.98-5.429l-2.914-2.642-2.76 1.33-.061 1.411z"></path>
        <g>
            <defs>
                <path id="c" d="M19.941 8.065l-1.987-1.282-.431-2.396 1.375-2.107 2.379-.583 1.987 1.282.43 2.396-1.376 2.108z"></path>
            </defs>
            <clipPath id="d">
                <use xlink:href="#c" overflow="visible"></use>
            </clipPath>
            <path clip-path="url(#d)" fill="#BEBFBF" d="M17.289 3.09l1.686 1.68.286 1.586.831.537 1.575-.387.798-1.219 1.693-2.597 1.454.965s.651 2.423.474 2.64c-.179.218-1.437 2.837-2.119 3.354-.687.518-5.6 1.827-5.6 1.827l-4.93-1.766 3.852-6.62z"></path>
        </g>
        <path fill="#EA6362" d="M8.435 2.301L5.294 7.45l-2.629 4.519-.53 3.708.458 1.563 1.068.935-1.889-.388h-.375l-.752.203s1.685-6.563 1.728-6.664c.042-.102 1.319-3.173 1.395-3.315.075-.14 2.964-4.653 2.964-4.653l1.703-1.057z"></path>
        <g>
            <path fill="#FFF" d="M23.998 18.392c.129.938-.639 1.856-1.711 2.055L2.642 24.034C1.57 24.23.599 23.628.472 22.69L.03 19.42c-.126-.938.64-1.855 1.711-2.054l19.646-3.588c1.072-.196 2.043.407 2.169 1.343l.442 3.271z"></path>
            <defs>
                <path id="e" d="M23.998 18.392c.129.938-.639 1.856-1.711 2.055L2.642 24.034C1.57 24.23.599 23.628.472 22.69L.03 19.42c-.126-.938.64-1.855 1.711-2.054l19.646-3.588c1.072-.196 2.043.407 2.169 1.343l.442 3.271z"></path>
            </defs>
            <clipPath id="f">
                <use xlink:href="#e" overflow="visible"></use>
            </clipPath>
            <path clip-path="url(#f)" fill="#BEBFBF" d="M1.018 17.24l2.461 4.173 3.975.304 5.279-1.54 4.397.103 3.415-1.289 3.866.774.263 1.948-23.72 3.485-1.182-2.866.203-4.642z"></path>
            <g>
            　　<defs>
                　　<path id="g" d="M23.998 18.392c.129.938-.639 1.856-1.711 2.055L2.642 24.034C1.57 24.23.599 23.628.472 22.69L.03 19.42c-.126-.938.64-1.855 1.711-2.054l19.646-3.588c1.072-.196 2.043.407 2.169 1.343l.442 3.271z"></path>
            　　</defs>
            　　<clipPath id="h">
                　　<use xlink:href="#g" overflow="visible"></use>
            　　</clipPath>
            　　<path clip-path="url(#h)" fill="#E7E7E8" d="M20.078 13.428l1.783 1.201.211 1.559.36 1.426-1.887 1.377 3.111.623 2.027-.111-.732-5.403-1.504-.921z"></path>
            </g>
        </g>
    </svg>
</body>
</html>

效果如下：

转载于:https://www.cnblogs.com/guwei4037/p/10172853.html