SVG边线边框属性
-
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中超出视窗边界的区域会被裁切并且隐藏。
<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>
- 它声明了一个特定的区域,画布横跨左上角的点(0,0)到点(200,150)。
- SVG图像被这个区域裁切。
- 区域被拉伸(类似缩放效果)来充满整个视窗。
- 用户座标系被映射到视窗座标系-在这种情况下-一个用户单位等于两个视窗单位。
<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"的效果如下。图形被裁切然后拉伸来充满整个视窗区域。4:3
.
显然,实际应用viewBox
不可能一直跟viewport
穿同一条开裆裤。此时,就需要preserveAspectRatio
出马了,此属性也是应用在<svg>
元素上,且作用的对象都是viewBox。preserveAspectRatio
属性让你可以在保持宽高比的情况下强制统一viewBox
的缩放比,并且如果不想用默认居中你可以声明viewBox
在视窗中的位置。它在任何建立新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的。