SVG基本

[5Mi]

svg

简单记录 主要还是看链接过来的页面

来自

<svg width="200" height="250">
  <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"/>
  <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
      stroke="orange" fill="transparent" stroke-width="5"/>

  <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
      stroke="green" fill="transparent" stroke-width="5"/>

  <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
</svg>

- 矩形 - rect元素

这个元素有6个控制位置和形状的属性，分别是：

x：矩形左上角的坐标(用户坐标系)的x值。

y：矩形左上角的坐标(用户坐标系)的y值。

width：矩形宽度。

height：矩形高度。

rx：实现圆角效果时，圆角沿x轴的半径。

ry：实现圆角效果时，圆角沿y轴的半径。

比如上面例子中，实现了圆角效果，你也可以通过设置rx,ry为不同的值实现椭圆角效果。

• 圆 - circle元素

  这个元素的属性很简单，主要是定义圆心和半径：

  r：圆的半径。

  cx：圆心坐标x值。

  cy：圆心坐标y值。

• 椭圆 - ellipse元素 　　 这个是更加通用的圆形元素，你可以分别控制半长轴和半短轴的长度，来实现不同的椭圆，很容易想到，当两个半轴相等时，就是正圆形了。 rx：半长轴(x半径)。

  ry：半短轴(y半径)。

  cx：圆心坐标x值。

  cy：圆心坐标y值。

• 直线 - line元素

  直线需要定义起点与终点即可：

  x1：起点x坐标。

  y1：起点y坐标。

  x2：终点x坐标。

  y2：终点y坐标。

• 折线 - polyline元素 　　 折线主要是要定义每条线段的端点即可，所以只需要一个点的集合作为参数：

  points：一系列的用空格，逗号，换行符等分隔开的点。每个点必须有2个数字：x值和y值。所以下面3个点 (0,0), (1,1)和(2,2)可以写成："0 0, 1 1, 2 2"。

• 多边形 - polygon元素

  这个元素就是比polyline元素多做一步，把最后一个点和第一个点连起来，形成闭合图形。参数是一样的。

  points：一系列的用空格，逗号，换行符等分隔开的点。每个点必须有2个数字：x值和y值。所以下面3个点 (0,0), (1,1)和(2,2)可以写成："0 0, 1 1, 2 2"。

• 路径 - path元素 　　 这个是最通用，最强力的元素了；使用这个元素你可以实现任何其他的图形，不仅包括上面这些基本形状，也可以实现像贝塞尔曲线那样的复杂形状；此外，使用path可以实现平滑的过渡线段，虽然也可以使用polyline来实现这种效果，但是需要提供的点很多，而且放大了效果也不好。这个元素控制位置和形状的只有一个参数：

  d：一系列绘制指令和绘制参数(点)组合成。

　　绘制指令分为绝对坐标指令和相对坐标指令两种，这两种指令使用的字母是一样的，就是大小写不一样，绝对指令使用大写字母，坐标也是绝对坐标；相对指令使用对应的小写字母，点的坐标表示的都是偏移量。

[5Mi]

svg文本与图像

来自

直接显示文本，可以使用text元素，例子如下：

<svg>  
  <rect width="300" height="200" fill="red" />  
  <circle cx="150" cy="100" r="80" fill="green" />  
  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>  
</svg>

　　如上面的例子中所示，text元素可以设置下列的属性：

• x,y是文本位置坐标。
• text-anchor是文本显示的方向，其实也就是位置(x,y)处于文本的位置。这个属性有start,middle和end三种值。
• start表示文本位置坐标(x,y)位于文本的开始处，文本从这点开始向右挨个显示。
• middle表示(x,y)位于文本中间处，文本向左右两个方向显示，其实就是居中显示。
• end表示(x,y)点位于文本结尾，文本向左挨个显示。 　　 除了这些属性，下面的这些属性都既可以在CSS中指定，也可以直接在属性中指定:
• fill,stroke：填充和描边颜色，具体使用在后面总结。
• font的相关属性：font-family, font-style, font-weight, font-variant, font-stretch, font-size, font-size-adjust, kerning, letter-spacing, word-spacing and text-decoration。