svg用法--svg的一些属性

SVG边线边框属性

例子中<path stroke="red" d="M0 10 l300 0" />即从点0,10 开始，连直线到点 200，0（相对位置）；

或者 <path stroke="green" d="M0 40 L300 40" />即即从即从点 5,20 开始，连直线到点 300，40（相对位置）；

• SVG stroke 属性

  这个stroke属性用来定义图形、文本等的边线颜色：

  下面的图形使用的SVG代码：

  <svg height="100" width="400">
    <g fill="none">
      <path stroke="red" d="M0 10 l300 0" />
      <path stroke="green" d="M0 40 L300 40" />
      <path stroke="blue" d="M0 70 L300 70" />
    </g>
  </svg>

  
  
  
  

• SVG stroke-width 属性

  stroke-width属性用来定义图形或文字边线的宽度：

  下面的图形使用的SVG代码：

  <svg height="100" width="400">
    <g fill="none" stroke="red">
      <path stroke-width="2" d="M0 10 l300 0" />
      <path stroke-width="4" d="M0 40 L300 40" />
      <path stroke-width="6" d="M0 70 L300 70" />
    </g>
  </svg>

  
  
  
  

• SVG stroke-linecap 属性

  stroke-linecap属性用来定义开放式路径的端点的样子：

  下面的图形使用的SVG代码：

  <svg height="100" width="400">
    <g fill="none" stroke="red" stroke-width="16">
      <path stroke-linecap="butt" d="M0 10 l300 0" />
      <path stroke-linecap="round" d="M0 40 L300 40" />
      <path stroke-linecap="square" d="M0 70 L300 70" />
    </g>
  </svg>

  
  

• SVG stroke-dasharray 属性

  stroke-dasharray属性用来创建虚线：

  下面的图形使用的SVG代码：

  <svg height="100" width="400">
    <g fill="none" stroke="red" stroke-width="6">
      <path stroke-dasharray="6,6" d="M0 10 l300 0" />
      <path stroke-dasharray="20,6" d="M0 40 L300 40" />
      <path stroke-dasharray="20,6,6,6,6,20" d="M0 70 L300 70" />
    </g>
  </svg>

  
  

  SVG transform

• transform	描述
  translate(x, y)	平移: 将用户坐标系统的坐标原点移动到(x, y)
  scale(xFactor, yFactor)	缩放: 将用户坐标系统的xy轴单位长度分别乘(xFactor, yFactor)倍
  scale(factor)	缩放: 同 scale(factor, factor)
  rotate(angle, centerX, centerY)	旋转: 将用户坐标系统以(centerX, centerY)为旋转中心顺时针旋转 angle 度
  rotate(angle)	旋转: 同 rotate(angle, 0, 0)
  skewX(angle)	倾斜: 根据 angle 倾斜所有 x 轴坐标, 视觉上会看到 y 轴倾斜...
  skewY(angle)	倾斜: 根据 angle 倾斜所有 y 轴坐标, 视觉上会看到 x 轴倾斜...
  matrix(a b c d e f)	矩阵变换: 将坐标系统进行矩阵变换, 详细内容请参考后续文章

  <svg width="500" height="300"> <path d="M 20 20 v 100  h 100 v -100 z" fill="none" stroke="red" stroke-width="3" /> </svg> 

  
  

  <svg width="500" height="300"> <path d="M 20 20 v 100  h 100 v -100 z" fill="none" stroke="red" stroke-width="3" transform="rotate(45 40 90)"/> </svg> 

  
  
  svg的viewBox和preserveAspectRatio属性
  

• SVG viewBox 属性

  SVG通过有限区域展现在屏幕上，这个区域叫做viewport。SVG中超出视窗边界的区域会被裁切并且隐藏。

           （viewBox="x, y, width, height"  // x:左上角横坐标，y:左上角纵坐标，width:宽度，height:高度）

<svg width="400" height="300" viewBox="0 0 200 150" style="border:1px solid #cd0000;">
      <image xlink:href="img/timg.jpg" x="0" y="0" height="50px" width="50px"/>
    </svg>

viewBox="0 0 200 150"

1. 它声明了一个特定的区域，画布横跨左上角的点(0,0)到点(200,150)。
2. SVG图像被这个区域裁切。
3. 区域被拉伸（类似缩放效果）来充满整个视窗。
   
4. 用户坐标系被映射到视窗坐标系-在这种情况下-一个用户单位等于两个视窗单位。

<svg width="400" height="300" viewBox="20 20 200 150" style="border:1px solid #cd0000;">
      <image xlink:href="img/timg.jpg" x="0" y="0" height="50px" width="50px"/>
    </svg>

添加viewBox="20 20 200 150"的效果如下。图形被裁切然后拉伸来充满整个视窗区域。

上面的例子，SVG的宽高比正好和viewBox的宽高比是一样的，都是 4:3 . 显然，实际应用 viewBox 不可能一直跟 viewport 穿同一条开裆裤。此时，就需要 preserveAspectRatio 出马了，此属性也是应用在 <svg> 元素上，且 作用的对象都是viewBox 。preserveAspectRatio属性让你可以在保持宽高比的情况下强制统一viewBox的缩放比，并且如果不想用默认居中你可以声明viewBox在视窗中的位置。

preserveAspectRatio的官方语法是：  preserveAspectRatio = defer? <align> <meetOrSlice>？

它在任何建立新viewport的元素上都有效（我们会在这个系列的下一部分讨论这个问题）。

defer声明是可选的，并且只有当你在<image>上添加preserveAspectRatio才被用到。用在任何其他元素上时它都会被忽略。<images>本身不在这篇文章的讨论范围，我们暂时跳过defer这个选项。

align参数声明是否强制统一放缩，如果是，对齐方法会在viewBox的宽高比不符合viewport的宽高比的情况下生效。

如果align值设为none，例如：

preserveAspectRatio = "none"

图形不在保持宽高比而会缩放来适应视窗，像我们在上面两个例子中看到的那样。

其他所有preserveAspectRatio值都在保持viewBox的宽高比的情况下强制拉伸，并且指定在视窗内如何对齐viewBox。我们会简短介绍align的值。

最后一个属性，meetOrSlice也是可选的，默认值为meet。这个属性声明整个viewBox在视窗中是否可见。如果是，它和align参数通过一个或多个空格分隔。例如：

preserveAspectRatio = "xMidYMid slice"

preserveAspectRatio属性的值为空格分隔的两个值组合而成。例如，上面的xMidYMid和meet.

第1个值表示，viewBox如何与SVG viewport对齐；第2个值表示，如何维持高宽比（如果有）。

其中，第1个值又是由两部分组成的。前半部分表示x方向对齐，后半部分表示y方向对齐。家族成员如下：

值含义

xMin	viewport和viewBox左边对齐
xMid	viewport和viewBox x轴中心对齐
xMax	viewport和viewBox右边对齐
YMin	viewport和viewBox上边缘对齐。注意Y是大写。
YMid	viewport和viewBox y轴中心点对齐。注意Y是大写。
YMax	viewport和viewBox下边缘对齐。注意Y是大写。

preserveAspectRatio属性第2部分的值支持下面3个：

值含义

meet	保持纵横比缩放viewBox适应viewport
slice	保持纵横比同时比例小的方向放大填满viewport
none	扭曲纵横比以充分适应viewport

<svg width="400" height="300"  viewBox="0 0 100 100" style="border:1px solid #cd0000;">
      <image xlink:href="img/timg.jpg" x="0" y="0" height="50px" width="50px"/>
    </svg>

<svg width="400" height="300" viewBox="0 0 100 100" preserveAspectRatio="xMinYMin slice" style="border:1px solid #cd0000;">
      <image xlink:href="img/timg.jpg" x="0" y="0" height="50px" width="80px"/>
    </svg>

默认应该是 "xMidYmid meet" 效果。表现原理为：SVG宽 400 , 高 200 ，viewBox宽 200 , 高 200 .  x 横轴比例是 2 ,  y 纵轴比例是 1 . meet 的作用是让viewBox等比例的同时，完全在SVG的viewport中显示。这里，最小比例是纵向的 1 ，所以，实际上viewBox并没有任何的缩放。

无论是meet还是slice，你是不可能在一种状态下同时看到x, y方向上的位移的。因为总会有一个方向是充满viewport的。