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

Question

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

Answer 1

Phrogz的回答对于普通的SVG来说非常好,但这个问题也标记为Raphael,其中的东西相似,但略有不同.拉斐尔的中风设置并不多,所以这里有一个完整的现场演示.

它的示例记录了如何在Raphael.js中使用stroke-dasharray(虚线和虚线),stroke-linejoin(笔划角样式)和stroke-linecap(路径笔划样式).

链接到jsfiddle现场演示

使用.attr({'stroke-dasharray': option})在拉斐尔点/虚线,与这些选项(一个没有数字,不像纯SVG):

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

使用.attr({'stroke-linejoin': option})在用于圣拉斐尔圆角,斜角或尖锐(斜切)角部(与SVG除了继承):

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

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

使用.attr({'stroke-linecap': option})以控制描边路径拉斐尔的末端帽:

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

Answer 2

stroke-linecap

• 法律价值观:butt| round| square|inherit
• 例
  

stroke-linejoin

• 法律价值观:miter| round| bevel|inherit
• 例
  

stroke-dasharray

• 法律价值:以逗号或空格分隔的长度或百分比列表,
  例如"100 20 0 20"
• 示例(使用上述值)