SVG的应用

最新推荐文章于 2023-05-22 22:41:03 发布

你的美，让我痴迷

最新推荐文章于 2023-05-22 22:41:03 发布

阅读量229

点赞数

分类专栏： svg

本文链接：https://blog.csdn.net/weixin_45932157/article/details/108452737

版权

svg 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<body>

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">

        <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" />
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple" />
        <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" />
        <ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" />
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
    </svg>
    <svg height="210" width="500">
        <polygon points="200,10 250,190 160,210"
                 style="fill:lime;stroke:purple;stroke-width:1" />
    </svg>
    <svg height="250" width="500">
        <polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:1" />
    </svg>
    <svg height="210" width="500">
        <polygon points="100,10 40,198 190,78 10,78 160,198"
                 style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
    </svg>
    <svg height="210" width="500">
        <polygon points="100,10 40,198 190,78 10,78 160,198"
                 style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" />
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style="fill:white;stroke:red;stroke-width:4" />
    </svg>

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <path d="M150 0 L75 200 L225 200 Z" />
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="400" width="450">
        <path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="3" fill="none" />
        <path id="lineBC" d="M 250 50 l 150 300" stroke="red" stroke-width="3" fill="none" />
        <path d="M 175 200 l 150 0" stroke="green" stroke-width="3" fill="none" />
        <path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" />
        <!-- Mark relevant points -->
        <g stroke="black" stroke-width="3" fill="black">
            <circle id="pointA" cx="100" cy="350" r="3" />
            <circle id="pointB" cx="250" cy="50" r="3" />
            <circle id="pointC" cx="400" cy="350" r="3" />
        </g>
        <!-- Label the points -->
        <g font-size="30" font="sans-serif" fill="black" stroke="none" text-anchor="middle">
            <text x="100" y="350" dx="-30">A</text>
            <text x="250" y="50" dy="-10">B</text>
            <text x="400" y="350" dx="30">C</text>
        </g>
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <text x="0" y="15" fill="red">I love SVG</text>
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG</text>
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>
            <path id="path1" d="M75,20 a1,1 0 0,0 100,0" />
        </defs>
        <text x="10" y="100" style="fill:red;">
            <textPath xlink:href="#path1">I love SVG I love SVG</textPath>
        </text>
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
         xmlns:xlink="http://www.w3.org/1999/xlink">
        <a xlink:href="//www.w3cschool.cc/svg/" target="_blank">
            <text x="0" y="15" fill="red">I love SVG</text>
        </a>
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <g fill="none">
            <path stroke="red" d="M5 20 l215 0" />
            <path stroke="black" d="M5 40 l215 0" />
            <path stroke="blue" d="M5 60 l215 0" />
        </g>
    </svg>

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <g fill="none" stroke="black">
            <path stroke-width="2" d="M5 20 l215 0" />
            <path stroke-width="4" d="M5 40 l215 0" />
            <path stroke-width="6" d="M5 60 l215 0" />
        </g>
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <g fill="none" stroke="black" stroke-width="4">
            <path stroke-dasharray="5,5" d="M5 20 l215 0" />
            <path stroke-dasharray="10,10" d="M5 40 l215 0" />
            <path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
        </g>
    </svg>
</body>
</html>

效果图：

在这里插入图片描述

你的美，让我痴迷

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
SVG的应用

<!DOCTYPE html><html><body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> </svg> <svg xmlns="http://www.w3
复制链接

扫一扫