stroke-dasharray

  • Revision slug: Web/SVG/Attribute/stroke-dasharray
  • Revision title: stroke-dasharray
  • Revision id: 427055
  • Created:
  • Creator: Jeremie
  • Is current revision? Yes
  • Comment Moved From SVG/Attribute/stroke-dasharray to Web/SVG/Attribute/stroke-dasharray

Revision Content

« SVG Attribute reference home

the stroke-dasharray attribute controls the pattern of dashes and gaps used to stroke paths.

As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet

Usage context

Categories Presentation attribute
Value none | <dasharray> | inherit
Animatable Yes
Normative document SVG 1.1 (2nd Edition)
<dasharray>
It's 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 is equivalent to 5,3,2,5,3,2.

Example

Source code Output result
{{ embed_text("stroke-dasharray.svg", "xml") }} {{ EmbedSVG("stroke-dasharray.svg",200,200) }}

» stroke-dasharray.svg

Elements

The following elements can use the stroke-dasharray attribute

Revision Source

<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
<p>the <code>stroke-dasharray</code> attribute controls the pattern of dashes and gaps used to stroke paths.</p>
<p>As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet</p>
<h2 id="Usage_context">Usage context</h2>
<table class="standard-table">
  <tbody>
    <tr>
      <th scope="row">Categories</th>
      <td>Presentation attribute</td>
    </tr>
    <tr>
      <th scope="row">Value</th>
      <td><strong title="this is the default value">none</strong> | &lt;dasharray&gt; | inherit</td>
    </tr>
    <tr>
      <th scope="row">Animatable</th>
      <td>Yes</td>
    </tr>
    <tr>
      <th scope="row">Normative document</th>
      <td><a class="external" href="http://www.w3.org/TR/SVG/painting.html#StrokeDasharrayProperty" title="http://www.w3.org/TR/SVG/painting.html#StrokeDasharrayProperty">SVG 1.1 (2nd Edition)</a></td>
    </tr>
  </tbody>
</table>
<dl>
  <dt>
    &lt;dasharray&gt;</dt>
  <dd>
    It's a list of comma and/or white space separated <a href="/en/SVG/Content_type#Length" title="en/SVG/Content_type#Length"><span>&lt;length&gt;</span></a>s and <a href="/en/SVG/Content_type#Percentage" title="en/SVG/Content_type#Percentage">&lt;percentage&gt;</a>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, <strong>5,3,2</strong> is equivalent to <strong>5,3,2,5,3,2</strong>.</dd>
</dl>
<h2 id="Example">Example</h2>
<table class="standard-table">
  <tbody>
    <tr>
      <th scope="col">Source code</th>
      <th scope="col">Output result</th>
    </tr>
    <tr>
      <td>{{ embed_text("stroke-dasharray.svg", "xml") }}</td>
      <td>{{ EmbedSVG("stroke-dasharray.svg",200,200) }}</td>
    </tr>
  </tbody>
</table>
<p>» <a href="https://developer.mozilla.org/files/3299/stroke-dasharray.svg" title="https://developer.mozilla.org/files/3299/stroke-dasharray.svg">stroke-dasharray.svg</a></p>
<h2 id="Elements">Elements</h2>
<p>The following elements can use the <code>stroke-dasharray</code> attribute</p>
<ul>
  <li><a href="/en/SVG/Element#Shape_elements" title="en/SVG/Element#Shape_elements">Shape elements</a>&nbsp;»</li>
  <li><a href="/en/SVG/Element#Text_content_elements" title="en/SVG/Element#Text_content_elements">Text content elements</a>&nbsp;»</li>
</ul>
Revert to this revision