SVG初尝试

Posted raind

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了SVG初尝试相关的知识,希望对你有一定的参考价值。

基本图形

rect(矩形)、circle、ellipse(椭圆)、line(直线)、polyline(折线)、polygon(多边形)、path(可以绘制任意图形)

rect

技术图片

x,y定义矩形坐标,矩形左上角的位置
rx、ry定义矩形的圆角,只给一个值,两者一致

circle

技术图片

cx、cy定义圆的坐标,圆心的位置
r定义圆的半径

ellipse

技术图片

line

技术图片

polyline

技术图片

polygon

技术图片

基本属性

fill(填充颜色)、stroke(描边颜色)、stroke-width(描边粗细)、transform

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div>
      <svg width="700" height="500" xmlns="http://www.w3.org/2000/svg">
        <rect 
            x="10" 
            y="10" 
            rx="5" 
            ry="5" 
            width="150" 
            height="100" 
            stroke="red" 
            fill="none">
        </rect>
    
        <circle 
            cx="250" 
            cy="60" 
            r="50" 
            stroke="red" 
            fill="none">
        </circle>
    
        <ellipse 
            cx="400" 
            cy="60" 
            rx="70" 
            ry="50" 
            stroke="red" 
            fill="red">
        </ellipse>
    
        <line 
            x1="10" 
            y1="120" 
            x2="160" 
            y2="220" 
            stroke="red">
        </line>
    
        <polyline 
            points="250 120 
                    300 220
                    200 220"
            stroke="red"
            fill="none">
        </polyline>
    
        <polygon 
            points="250 120 
                    300 220
                    200 220"
            stroke="red"
            stroke-width="5"
            fill="yellow"
            transform="translate(150 0)">
        </polygon>
    </svg>
  </div>
</body>
</html>

技术图片

以上是关于SVG初尝试的主要内容,如果未能解决你的问题,请参考以下文章

前端开发常用代码片段(中篇)

AE CC 里还原三维骨骼动画 | Json数据导入初尝试

用php下载一个svg

text 使用SVG的片段

css 快速片段将svg与中心对齐并缩放到视口大小。

通过 webapp 提供时,SVG 片段标识符在 Safari 中被交换