SVG
属性 | Attributes

stroke-dasharray

stroke-dasharray

stroke-dasharray属性控制用于描边路径的破折号和间隙的模式。

作为一个表现属性,它也可以直接在CSS样式表中作为属性使用

用法说明

分类呈现属性
none | <dasharray> | 继承
动画
规范性文件SVG 1.1(第二版)

<dasharray>这是一个用逗号和/或空格分隔的<length> s和<percentage> s列表,用于指定交替的破折号和间隔的长度。如果提供了奇数个值,则重复该值列表以产生偶数个值。因此,5,3,2相当于5,3,2,5,3,2。

例子

<?xml version="1.0"?> <svg width="200" height="200" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg"> <line stroke-dasharray="5, 5" x1="10" y1="10" x2="190" y2="10" /> <line stroke-dasharray="5, 10" x1="10" y1="30" x2="190" y2="30" /> <line stroke-dasharray="10, 5" x1="10" y1="50" x2="190" y2="50" /> <line stroke-dasharray="5, 1" x1="10" y1="70" x2="190" y2="70" /> <line stroke-dasharray="1, 5" x1="10" y1="90" x2="190" y2="90" /> <line stroke-dasharray="0.9" x1="10" y1="110" x2="190" y2="110" /> <line stroke-dasharray="15, 10, 5" x1="10" y1="130" x2="190" y2="130" /> <line stroke-dasharray="15, 10, 5, 10" x1="10" y1="150" x2="190" y2="150" /> <line stroke-dasharray="15, 10, 5, 10, 15" x1="10" y1="170" x2="190" y2="170" /> <line stroke-dasharray="5, 5, 1, 5" x1="10" y1="190" x2="190" y2="190" /> <style><![CDATA[ line{ stroke: black; stroke-width: 2; } ]]></style> </svg>

Live sample

元素

以下元素可以使用该stroke-dasharray属性

  • Shape elements »

  • Text content elements »