【CSS】SVG（一）——基本属性

Composition
431 阅读2分钟

这是我参与11月更文挑战的第10天，活动详情查看：2021最后一次更文挑战

SVG（一）——基本属性

前两篇文章介绍了裁剪路径和运动路径，这次我们一起学习一下如何绘制路径

（1）一点概述

  • 在页面的二维平面上，任何一个位置都可以使用坐标轴的形式来表示

  • 一般的，我们用 x 代表横轴，用y 代表纵轴，页面默认左上角为原点，向右为X递增，向下为Y递增

    • 使用递增的 x 值来让物体右移，使用递减的 x 值来让物体左移

    • 同样地，使用递增的 y 值来让物体下移，使用递减的 y 值来让物体上移

  • 在坐标轴上，我们可以根据各个点的位置及其之间的关系来描绘出各种路径

  • 而使用<svg>标签就可以用来绘制这种路径

（2）一些属性

  • 在使用SVG时，主要使用到了以下属性

    • 主要属性

      • <svg> ：用于包裹并定义整个矢量图，这个标签内就是我们绘制路径的区域

      • <title>：用于设置SVG图形标题

      • <desc>：用于设置SVG图形的描述信息

    • 辅助属性：

      • <defs> 定义一个可复用的图形。初始情况下 <defs> 里面的内容是不可见的

      • <defs> 标签之于矢量图就如同 <head> 标签之于一个 web 页面

      • <g> 将多种形状组合起来

        • 将组合后的形状置于 <defs> 中可以让它能够被复用

      • <symbol> 类似于一个组合，但是拥有一些额外的特性

        • 通常被置于 <defs> 标签中便于复用

      • <use> 获取在 <defs> 中定义的复用对象并在 SVG 中显示出来

    • 路径属性：

      • <line> ：用于创建一条直线

      • <polyline> ：用于创建折线

      • <rect> ：用于创建一个矩形

      • <circle>：用于创建一个圆

      • <ellipse> ：用于创建椭圆

      • <polygon> ：用于创建多边形

      • <path> ：通过指定点以及点和点之间的关系，来创建任意形状

（3）一些元素样式属性

  • stroke：用于设置描线颜色

  • stroke-width：用于设置描线宽度

  • stroke-opacity：用于设置描线颜色的透明度

  • stroke-linecap：用于设置线条两端的形状

  • stroke-dasharray：用于设置线条的类型，虚线、直线

  • fill：用于设置描线的填充颜色

  • fill-opacity：用于设置填充颜色的透明度

  • opacity：用于设置元素透明度

    样式属性可以写在对应属性里面、写在style属性里面、写在class类里面

    <line stroke="2"></line>

<line style="stroke:2;"></line>

<style>
 svg {
     stroke: 2
 }
</style>

下一片文章介绍具体应用示例

avatar
文章
阅读
粉丝