stroke-dasharray

1. SVG 元素

   1. A
      1. <a>
      2. <altGlyph>
      3. <altGlyphDef>
      4. <altGlyphItem>
      5. <animate>
      6. <animateColor>
      7. <animateMotion>
      8. <animateTransform>
   2. B-C
      1. <circle>
      2. <clipPath>
      3. <color-profile>
      4. <cursor>
   3. D
      1. <defs>
      2. <desc>
   4. E
      1. <ellipse>
   5. F
      1. <feBlend>
      2. <feColorMatrix>
      3. <feComponentTransfer>
      4. <feComposite>
      5. <feConvolveMatrix>
      6. <feDiffuseLighting>
      7. <feDisplacementMap>
      8. <feDistantLight>
      9. <feFlood>
      10. <feFuncA>
      11. <feFuncB>
      12. <feFuncG>
      13. <feFuncR>
      14. <feGaussianBlur>
      15. <feImage>
      16. <feMerge>
      17. <feMergeNode>
      18. <feMorphology>
      19. <feOffset>
      20. <fePointLight>
      21. <feSpecularLighting>
      22. <feSpotLight>
      23. <feTile>
      24. <feTurbulence>
      25. <filter>
      26. <font>
      27. <font-face>
      28. <font-face-format>
      29. <font-face-name>
      30. <font-face-src>
      31. <font-face-uri>
      32. <foreignObject>
   6. G
      1. <g>
      2. <glyph>
      3. <glyphRef>
   7. H
      1. <hkern>
   8. I
      1. <image>
   9. J-L
      1. <line>
      2. <linearGradient>
   10. M
       1. <marker>
       2. <mask>
       3. <metadata>
       4. <missing-glyph>
       5. <mpath>
   11. N-P
       1. <path>
       2. <pattern>
       3. <polygon>
       4. <polyline>
   12. Q-R
       1. <radialGradient>
       2. <rect>
   13. S
       1. <script>
       2. <set>
       3. <stop>
       4. <style>
       5. <svg>
       6. <switch>
       7. <symbol>
   14. T
       1. <text>
       2. <textPath>
       3. <title>
       4. <tref>
       5. <tspan>
   15. U
       1. <use>
   16. V-Z
       1. <view>
       2. <vkern>

stroke-dasharray attribute is a presentation attribute defining the pattern of dashes and gaps used to paint the outline of the shape;

注意： As a presentation attribute,  stroke-dasharray can be used as a CSS property.

You can use this attribute with the following SVG elements:

• <altGlyph>
• <circle>
• <ellipse>
• <path>
• <line>
• <polygon>
• <polyline>
• <rect>
• <text>
• <textPath>
• <tref>
• <tspan>

范例

html,body,svg { height:100% }

								

<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
  <!-- No dashes nor gaps -->
  <line x1="0" y1="1" x2="30" y2="1" stroke="black" />
  <!-- Dashes and gaps of the same size -->
  <line x1="0" y1="3" x2="30" y2="3" stroke="black"
          stroke-dasharray="4" />
  <!-- Dashes and gaps of different sizes -->
  <line x1="0" y1="5" x2="30" y2="5" stroke="black"
          stroke-dasharray="4 1" />
  <!-- Dashes and gaps of various sizes with an odd number of values -->
  <line x1="0" y1="7" x2="30" y2="7" stroke="black"
          stroke-dasharray="4 1 2" />
  <!-- Dashes and gaps of various sizes with an even number of values -->
  <line x1="0" y1="9" x2="30" y2="9" stroke="black"
          stroke-dasharray="4 1 2 3" />
</svg>

								

用法注意事项

<dasharray>

A list of comma and/or white space separated <length> s and <percentage> s that specify the lengths of alternating dashes and gaps.

If an odd number of values is provided, then the list of values is repeated to yield an even number of values. Thus, 5,3,2 相当于 5,3,2,5,3,2 .

浏览器兼容性

BCD tables only load in the browser

规范

Found a problem with this page?

• Edit on GitHub
• Source on GitHub
• Report a problem with this content on GitHub
• Want to fix the problem yourself? See our Contribution guide .

最后修改： Sep 23, 2021 , 由 MDN 贡献者