16

谁能给我一个实际使用这些属性的示例：stroke-dasharray、stroke-linecap、stroke-linejoin 我尝试使用它们，但我不太了解它们值的文本结构。

4

4 回答 4

35

Phrogz 的回答非常适合普通的 SVG，但是这个问题也被标记为Raphael，其中的情况相似，但略有不同。Raphael 中笔画设置的好例子并不多，所以这里有一个完整的现场演示。

它有示例记录如何在Raphael.jsstroke-dasharray中使用（虚线和虚线）、stroke-linejoin（笔触角样式）和stroke-linecap（路径笔触帽样式）。

链接到 jsfiddle 现场演示

用于.attr({'stroke-dasharray': option})Raphael 中的虚线，带有以下选项之一（没有数字，与纯 SVG 不同）：

["", "-", ".", "-.", "-..", ". ", "- ", "--", "- .", "--.", "--.."]

在此处输入图像描述

用于.attr({'stroke-linejoin': option})Raphael 中的圆角、斜角或尖角（斜接）（与 SVG 相同，但继承除外）：

["bevel", "round", "miter"]

在此处输入图像描述

您还可以.attr({'stroke-miterlimit': decimal})根据笔划宽度和斜接（锐角）连接变钝的角度设置哪个控制截止点。与 SVG stroke-miterlimit 相同，因此适用 SVG 文档。可以在上面的 jsfiddle 中看到跨浏览器的变化（例如 Windows 上的 Chrome 和 Firefox 之间）

在此处输入图像描述

用于.attr({'stroke-linecap': option})控制描边 raphael 路径末端的大写：

["butt", "square", "round"]

在此处输入图像描述

于 2012-12-14T19:05:19.847 回答
31

stroke-linecap

  • 法律价值：butt| round| square|inherit
  • 例子
    上面例子的截图

stroke-linejoin

  • 法律价值：miter| round| bevel|inherit
  • 例子
    上面例子的截图

stroke-dasharray

  • 合法值：以逗号或空格分隔的长度或百分比列表，
    例如"100 20 0 20"
  • 示例（使用上述值）
    在此处输入图像描述
于 2012-06-08T04:54:19.760 回答
3

请注意，此答案仅涵盖stroke-dasharray并且是对 Phrogz 答案的补充。
Raphael 没有stroke-dasharray像 user568458 所说的那样提供很大的设置自由度，因为我需要它像其他 svg 创建者一样工作，所以我做了一些调整raphael.js以适应所有可能的stroke-dasharray值。

addDashes = function (o, value, params) {
        var nvalue = dasharray[Str(value).toLowerCase()];
        if (nvalue!==undefined) {
            var width = o.attrs["stroke-width"] || "1",
                butt = {round: width, square: width, butt: 0}[o.attrs["stroke-linecap"] || params["stroke-linecap"]] || 0,
                dashes = [],
                i = nvalue.length;
            while (i--) {
                dashes[i] = nvalue[i] * width + ((i % 2) ? 1 : -1) * butt;
            }
            $(o.node, {"stroke-dasharray": dashes.join(",")});
        }else{
            $(o.node, {"stroke-dasharray": Str(value).toLowerCase()});
        }
    }

dasharray替换文件中定义对象的位置下方的先前代码。

于 2013-07-18T06:40:11.457 回答
2

如果您想以标准 SVG 方式在 Raphael 线对象上应用虚线，这对我来说效果很好；而我没有像拉斐尔那样使用句号和连字符的运气。

myLine.attr({stroke:'green'}).node.setAttribute('stroke-dasharray', '10,10');

参数（10,10在本例中）是长度、间隙，您可以根据需要对其进行迭代。就像5, 5, 1, 5是带有点的短破折号。

参考：https ://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray

于 2018-01-13T19:21:01.440 回答