[译]SVG Stroke属性

[camiler]

原文： http://modernweb.com/2014/07/09/using-svg-stroke-attributes

内联SVG对完全自定义图形提供所有使用途径以及对其输出的控制。当在浏览器中手动创建形状，或者对现有图形进行编辑时，这就特别方便。

在SVG中有若干和stroke相关的属性，这就允许我们可以控制图形的具体细节，跟矢量图形软件一样。这篇文章就是作为一个通用指导，通过这些属性来入门，通过这篇文章有助于理解这些属性的功能和潜在可能性。

为了说明这些不同属性的效果，我们来看看葡萄的轮廓图。

stroke

stroke 属性定义特定形状和路径的“边界”颜色。

查看代码

默认值是"none"。

stroke-width

stroke-width值制定葡萄边框的宽度，设置为6px。

这个属性的默认值是1。如果值是百分数，那这个值是基于视图的尺寸。

stroke-linecap

stroke-linecap定义一个开放路径的端点采用哪种形状，这里有四个选项值：butt, round, square, inherit。
每个选项的详细展示如下：

我们把葡萄茎干的这个属性设置为square

查看代码

stroke-linejoin

stroke-linejoin定义画笔在路径和基本形状上的转角如何展示。

当我们将葡萄的转角linejoin 属性从round改变成bevel时发生了什么变化：

查看代码

stroke-miterlimit

当两条线相遇会形成一个尖角，并且设置了stroke-linejoin="miter"时,stroke-miterlimit 属性就是允许这个交汇处/转角可以延伸到多远的规格。

交汇处的长度也被称为斜接长度，测量的是交汇处内角和外角之间的距离。

这个值就是斜接长度和stroke-width的比值的一个界限值。

1.0是该属性的最小可能值。

第一个葡萄的图像设置成 stroke-miterlimit="1.0"，形成一种斜角效果。第二幅图像stroke-miterlimit 的值设置为 4.0。

查看代码

stroke-dasharray

stroke-dasharray属性允许我们将路径转换成虚线而不是实线。

通过这个属性，你可以指定虚线的长度以及虚线之间的距离，用逗号或者空格分开。

如果提供的值有奇数个，那这个列表会重复产生至偶数个值。比如，8,6,4 变成8,6,4,8,6,4 ，正如下面展示的第二个葡萄。

在这个值中只放一个数字，导致在虚线之间会有一个和一条虚线长度相等的空隙。

查看代码

第一个葡萄显示了一个列表值在路径上的影响。

stroke-dashoffset

stroke-dashoffset指定虚线的起始偏移距离。

查看代码

在上面的例子中，我们将虚线设置成40px长，dashoffset为35px。在路径的起点，虚线有35px是不可见的，在35px至40px之间显示虚线，这就是为什么第一段虚线显示的格外的短。

stroke-opacity

stroke-opacity属性很直观，就是允许我们在图形上设置一个透明度。

这个值是0至1中的小数，0表示完全透明。

stroke @Keyframes 动画

stroke属性可以动起来。这样可以创作一些独一无二的效果，比如，当你将路径的stroke-dashoffset动画描绘出来的时候。

为了让下面第一个葡萄的路径显示成“画出来”的效果，stroke-dasharray设置成刚好覆盖整条路径的虚线长度。然后设置一个匹配的stroke-dashoffset也是足够长可以覆盖路径，暂时让整个路径基本上看不到。

通过 @keyframes draw stroke-dashoffset在50%的点设回到“0”，让它显示的就好像正在画自己，也好像在回放。

查看代码

第二幅葡萄的stroke-dasharray是70px，通过 @keyframes shift，我们将动画效果设置成进行到一半的时候stroke-dashoffset是200px。

总结

内联SVG给我们提供了很强大的编辑选项。如果我们想改变成在浏览器外创建一个SVG，SVG也提供了相关工具通过确定的属性让这些选项可编辑。

在这篇文章中，我们通过回顾基本的SVG描边属性，探讨了它们的基本用途以及在浏览器中的编辑能力。

_这篇文章最初发布在http://jonibologna.com/using-svg-stroke-attributes/上。