SVG Stroke

by Online Tutorials Library July 14, 2022

SVG Stroke

SVG supports multiple stroke properties. These are as follow:

stroke

It is used to define the color of text, line or outline of any element.

Example

  <!DOCTYPE html>  <html>     <title>SVG Stroke Example</title>     <body>             <h1>SVG Stroke</h1>                <svg width=”500″ height=”500″>           <g>              <text x=”30″ y=”30″ >Using stroke: </text>              <path stroke=”blue” d=”M 50 50 L 300 50″ />              <path stroke=”orange” d=”M 50 70 L 300 70″ />              <path stroke=”red” d=”M 50 90 L 300 90″ />           </g>         </svg>          </body>  </html>  

Test it Now

stroke-width

It is used to define the thickness of text, line or outline of any element.

Example

  <!DOCTYPE html>  <html>     <title>SVG Stroke Example</title>     <body>                <h1>SVG Stroke</h1>                <svg width=”800″ height=”800″>           <text x=”30″ y=”10″ >Using stroke-width: </text>           <path stroke-width=”2″ stroke=”blue” d=”M 50 50 L 300 50″ />           <path stroke-width=”4″ stroke=”orange” d=”M 50 70 L 300 70″ />           <path stroke-width=”6″ stroke=”red” d=”M 50 90 L 300 90″ />        </svg>             </body>  </html>  

Test it Now

stroke-linecap

It is used to define the different types of ending of a line or outline of any path.

Example

  <!DOCTYPE html>  <html>     <title>SVG Stroke Example</title>     <body>                <h1>SVG Stroke</h1>                <svg width=”900″ height=”900″>           <g>              <text x=”30″ y=”30″ >Using stroke-linecap: </text>                         <path stroke-linecap=”square” stroke-width=”7″               stroke=”blue” d=”M 50 50 L 300 50″ />                         <path stroke-linecap=”round” stroke-width=”7″               stroke=”orange” d=”M 50 70 L 300 70″ />                         <path stroke-linecap=”butt” stroke-width=”7″              stroke=”red” d=”M 50 90 L 300 90″ />           </g>        </svg>          </body>  </html>  

Test it Now

stroke-dasharray

It is used to create dashed lines.

Example

  <!DOCTYPE html>  <html>     <title>SVG Stroke Example</title>     <body>             <h1>SVG Stroke</h1>                <svg width=”900″ height=”900″>           <g>              <text x=”30″ y=”30″ >Using stroke-dasharray: </text>                            <path stroke-dasharray=”5,5″ stroke-width=”6″               stroke=”blue” d=”M 50 50 L 300 50″ />                            <path stroke-dasharray=”10,10″ stroke-width=”6″               stroke=”orange” d=”M 50 70 L 300 70″ />                            <path stroke-dasharray=”20, 10, 5, 5, 5, 10″ stroke-width=”6″               stroke=”red” d=”M 50 90 L 300 90″ />           </g>        </svg>          </body>  </html>  

Test it Now

Next TopicSVG g Element

SVG Stroke

SVG Stroke

stroke

Example

stroke-width

Example

stroke-linecap

Example

stroke-dasharray

Example

SVG Animation

Data Window in Tableau | Data Types in Tableau

You may also like