SVG path路径学习二

最新推荐文章于 2024-12-25 14:42:12 发布

阿鳥

最新推荐文章于 2024-12-25 14:42:12 发布

阅读量762

点赞数

CC 4.0 BY-SA版权

分类专栏： html5 文章标签： svg 图形 html

本文链接：https://blog.youkuaiyun.com/aniaocool/article/details/72365366

html5 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何使用SVG创建各种基础形状，包括矩形、圆、椭圆、直线、折线及多边形等，并提供了示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基础形状

要想插入一个形状，你可以在文档中创建一个元素。不同的元素对应着不同的形状，并且使用不同的属性来定义图形的大小和位置。有一些形状因为可以由其他的形状创建而略显冗余，但是它们用起来方便，可让我们的SVG文档简洁易懂。下图展示了一些基本形状。生成它们的代码如下：

基本形状

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

    <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
    <!--矩形-->

    <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
    <!--为矩形添加圆角-->

    <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
    <!--圆-->

    <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>
    <!--椭圆-->

    <line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/>
    <!--也可用L指令完成直线 <path d="M10 110 L50 150" stroke="orange" stroke-width="5"></path>-->

    <polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145, 105 150"
          stroke="orange" fill="transparent" stroke-width="5"/>
    <!--折线 多点的连线-->

    <polygon points="30 160, 35 180, 50 180, 40 190, 45 205, 30 195, 15 205, 20 190, 10 180, 25 180"
          stroke="green" fill="transparent" stroke-width="5"/>
    <!--多边形polygon与polyline大致相同 不同的是polygon最后一点会回到原点-->

    <polygon points="60 175,90 175,90 205,60 205"
          stroke="green" fill="transparent" stroke-width="5"/>
    <!--polygon也能绘制矩形-->

    <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
    <!--QT二次贝塞尔曲线 与CS用法相似-->        

</svg>