Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
SVG Preview (Scaled)
<!-- Any copyright is dedicated to the Public Domain.
<title>Strokes on rects, rounded rects, circles, ellipses and lines</title>
<!-- rect: miter (square corners), round joins, with and without fill -->
<rect x="20" y="20" width="120" height="80" fill="none" stroke="black" stroke-width="10"/>
<rect x="160" y="20" width="120" height="80" fill="none" stroke="black" stroke-width="10" stroke-linejoin="round"/>
<rect x="300" y="20" width="120" height="80" fill="yellow" stroke="blue" stroke-width="12"/>
<rect x="440" y="20" width="120" height="80" fill="yellow" stroke="blue" stroke-width="12" paint-order="stroke"/>
<!-- rounded rect strokes, including a stroke wider than the radius -->
<rect x="20" y="130" width="120" height="80" rx="20" fill="none" stroke="green" stroke-width="8"/>
<rect x="160" y="130" width="120" height="80" rx="6" fill="orange" stroke="green" stroke-width="20"/>
<!-- circle and ellipse strokes -->
<circle cx="360" cy="170" r="40" fill="none" stroke="red" stroke-width="10"/>
<ellipse cx="500" cy="170" rx="60" ry="30" fill="pink" stroke="purple" stroke-width="6"/>
<!-- lines with each cap style, horizontal and vertical -->
<line x1="20" y1="250" x2="140" y2="250" stroke="black" stroke-width="16"/>
<line x1="160" y1="250" x2="280" y2="250" stroke="black" stroke-width="16" stroke-linecap="square"/>
<line x1="300" y1="250" x2="420" y2="250" stroke="black" stroke-width="16" stroke-linecap="round"/>
<line x1="460" y1="230" x2="460" y2="330" stroke="teal" stroke-width="16" stroke-linecap="round"/>
<line x1="500" y1="230" x2="500" y2="330" stroke="teal" stroke-width="16" stroke-linecap="square"/>
<!-- stroke-opacity and opacity with a single paint component -->
<rect x="20" y="300" width="120" height="80" fill="none" stroke="black" stroke-width="10" stroke-opacity="0.5" opacity="0.5"/>
<!-- opacity with fill and stroke goes through an opacity item -->
<rect x="160" y="300" width="120" height="80" fill="red" stroke="black" stroke-width="10" opacity="0.5"/>
</svg>