svg-元素与属性

1. 标签

• <svg>：包裹并定义整个矢量图；
• <line>：创建一条直线；
• <polyline>：创建折线；
• <polygon>：创建多边形；
• <rect>：创建矩形；
• <circle>：创建圆形；
• <ellipse>：创建圆形和椭圆；
• <g>：将多种形状组合起来。将组合后的形状置于 <defs> 中可以让它能够被复用；
• <text>、<tspan>：创建文本元素；
• <path>：通过指定点以及点与点之间的线来创建任意形状；
• <defs>：在 defs 元素中定义的图形元素不会直接呈现，建议将引用的元素定义在 <defs> 里；
• <use>：获取在 <defs> 中定义的复用对象并在 svg 中显示出来；
• <clipPath>：指定可绘制区域，当绘制的图形超出了剪切路径所指定的区域，超出区域的部分将不会被绘制；
• <mask>：用于定义遮罩元素，可以带有透明度；

2. 属性

• fill：颜色填充； 例如： fill=”#ff0”
• stroke：描边的颜色； 例如：stroke=”#ff0”
• stroke-width：描边宽度； 例如：stroke-width=2
• opacity：透明度； 例如：opacity=”0.2”
• transform： 变形； 例如：transform=”rotate(30deg)”

3. 基础图形实例和分析

<svg viewBox='0 0 800 400' width='800' height='400' style='border: 1px
solid green'>
    <line x1='0' y1='0' x2='100' y2='100' stroke='red' />
    <polyline points='100 150 150 150 150 100' stroke='red' fill='none'/>
    <polygon points='200 250 250 250 250 100' stroke='red' fill='none' />
    <rect x='300' y='80' width='100' height='50' fill='red' rx='10'
ry='20' />
    <circle cx='400' cy='200' r='50' fill='red' opacity='0.3' />
    <ellipse cx='550' cy='200' rx='80' ry='30' fill='red' opacity='0.8' />
</svg>

学习链接：

• https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial