如何在raphaeljs中使用attr的stroke-dasharray，stroke-linecap，stroke-linejoin

Question

任何人都可以给我一个动作中这些属性的例子：stroke-dasharray，stroke-linecap，stroke-linejoin我尝试使用它们，但我不太了解它们的值的sentext结构。

Answer 1

Phrogz的答案对于普通的SVG来说非常好，但是这个问题也被标记为 Raphael ，其中的内容类似，但略有不同。拉斐尔的中风设置并不多，所以这里有一个完整的现场演示。

它的示例记录了如何在 Raphael中使用stroke-dasharray（虚线和虚线），stroke-linejoin（描边角样式）和stroke-linecap（路径描边样式）的.js

Link to jsfiddle live demo

---

使用 .attr({'stroke-dasharray': option}) 表示Raphael中的虚线/虚线，其中一个选项（无数字，与纯SVG 不同）：

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

---

在Raphael 中使用 .attr({'stroke-linejoin': option}) 表示圆角，斜角或尖角（斜角）（与继承之外的SVG相同）：

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

您还可以设置.attr({'stroke-miterlimit': decimal})，它根据笔划宽度和超过斜角（尖锐）连接的角度来控制截止点。 Same as SVG stroke-miterlimit so SVG docs apply。浏览器中的跨浏览器变体可以在上面的jsfiddle中看到（例如在Windows上的Chrome和Firefox之间）

---

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

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

Answer 2

stroke-linecap

• 法律价值观：butt | round | square | inherit
• Example
  

---

stroke-linejoin

• 法律价值观：miter | round | bevel | inherit
• Example
  

---

stroke-dasharray

• 法律价值：以逗号或空格分隔的长度或百分比列表，
  例如"100 20 0 20"
• Example（使用上述值）
  

Answer 3

请注意，此答案仅涵盖stroke-dasharray，是Phrogz的补充答案。
Raphael没有提供很多自由来设置{5}用户所述的stroke-dasharray和我需要它像其他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对象的文件下面的文件中的前一个代码。

Answer 4

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

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