18/1/29.HTML5/CSS3的学习(十二)——SVG实例

1.绘制简笔画


<html>

    <head>
        <meta charset="UTF-8">
        <title>title>
    head>
    <body>

        <svg width="140" height="170" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <title>卡通猫title>
            <desc>一只猫的轮廓desc>
            
            <circle cx="70" cy="95" r="45" 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)" />
            
            <polyline points="108 70,  90 20,  70 50,  50, 20,  32, 70" style="stroke: black; fill: none;" />
            
            <polyline points="35 110, 45 120, 95 120, 105, 110" style="stroke: black; fill: none;" />
            
            <path d="M 75 90 L 65 90 A 5 10 0  0 0 75 90" style="stroke: black; fill: #ffcccc" />
            <text x="40" y="160" style="font-family: sans-serif; font-size: 14pt;
       stroke: none; fill: black;">卡通猫text>
        svg>
    body>

html>

运行结果:
18/1/29.HTML5/CSS3的学习(十二)——SVG实例_第1张图片

2.设计特效文字


<html>

    <head>
        <meta charset="utf-8">
        <style>
            @import "http://fonts.googleapis.com/css?family=Racing+Sans+One";
            $bg-path: "http://www.w3cplus.com/sites/default/files/blogs/2015/1506/" !default;
            html,
            body {
                height: 100vh;
                width: 100vw;
            }

            body {
                background: silver url(#{$bg-path}concrete_l.jpg) no-repeat center fixed;
                background-size: cover;
                overflow: hidden;
            }

            svg {
                display: block;
                position: absolute;
                min-width: 460px;
                width: 70vw;
                height: 70vh;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                overflow: hidden;
                background-size: cover;
            }

            .filtered {
                filter: url(#filter);
                color: white;
                font-family: 'Racing Sans One', cursive;
                fill: #2B3F0E;
                font-size: 140px;
            }
        style>
    head>

    <body>

        <svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 460 220" preserveAspectRatio="xMidYMid keep">
            
            <defs>

                <filter id="filter">
                    
                    <feFlood flood-color="#582D1B" result="COLOR-red">feFlood>

                    
                    <feTurbulence baseFrequency=".05,.004" top="-50%" type="fractalNoise" numOctaves="4" seed="0" result="FRACTAL-TEXTURE_10">feTurbulence>
                    <feColorMatrix type="matrix" values="0 0 0 0 0,0 0 0 0 0,
                        0 0 0 0 0, 0 0 0 -1.2 1.1"
                   in="FRACTAL-TEXTURE_10" result="FRACTAL-TEXTURE_20">feColorMatrix>
                    

                    
                    <feMorphology operator="dilate" radius="4" in="SourceAlpha" result="STROKE_10">feMorphology>

                    
                    <feConvolveMatrix order="8,8" divisor="1" kernelMatrix="1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1" in="STROKE_10" result="BEVEL_20">feConvolveMatrix>
                    
                    <feOffset dx="4" dy="4" in="BEVEL_20" result="BEVEL_25">feOffset>
                    
                    <feComposite operator="out" in="BEVEL_25" in2="STROKE_10" result="BEVEL_30">feComposite>
                    <feComposite in="COLOR-red" in2="BEVEL_30" operator="in" result="BEVEL_40">feComposite>
                    
                    <feMerge result="BEVEL_50">
                        <feMergeNode in="BEVEL_40">feMergeNode>
                        <feMergeNode in="SourceGraphic">feMergeNode>
                    feMerge>
                    
                    <feComposite in2="FRACTAL-TEXTURE_20" in="BEVEL_50" operator="in">feComposite>
                filter>
            defs>

            <g class="filtered">
                <text x="0" y="200" transform="rotate(-12)">HTML5text>
            g>
        svg>
    body>

html>

运行结果:
18/1/29.HTML5/CSS3的学习(十二)——SVG实例_第2张图片

你可能感兴趣的:(html5+css3)