SVG supports multiple stroke properties.
Following are the main stroke properties used.
Following are the main stroke properties used.
Example
testSVG.htm<html> <title>SVG Stroke</title> <body> <h1>Sample SVG Stroke</h1> <svg width="800" height="800"> <g> <text x="30" y="30" >Using stroke: </text> <path stroke="red" d="M 50 50 L 300 50" /> <path stroke="green" d="M 50 70 L 300 70" /> <path stroke="blue" d="M 50 90 L 300 90" /> </g> </svg> </body> </html>
Output
Open textSVG.htm in Chrome web browser. You can use Chrome/Firefox/Opera to view SVG image directly without any plugin. Internet Explorer 9 and higher also supports SVG image rendering.Stroke width
<html> <title>SVG Stroke</title> <body> <h1>Sample SVG Stroke</h1> <svg width="800" height="800"> <text x="30" y="10" >Using stroke-width: </text> <path stroke-width="2" stroke="black" d="M 50 50 L 300 50" /> <path stroke-width="4" stroke="black" d="M 50 70 L 300 70" /> <path stroke-width="6" stroke="black" d="M 50 90 L 300 90" /> </svg> </body> </html>
Output
Open textSVG.htm in Chrome web browser. You can use Chrome/Firefox/Opera to view SVG image directly without any plugin. Internet Explorer 9 and higher also supports SVG image rendering.stroke-linecap
<html> <title>SVG Stroke</title> <body> <h1>Sample SVG Stroke</h1> <svg width="800" height="800"> <g> <text x="30" y="30" >Using stroke-linecap: </text> <path stroke-linecap="butt" stroke-width="6" stroke="black" d="M 50 50 L 300 50" /> <path stroke-linecap="round" stroke-width="6" stroke="black" d="M 50 70 L 300 70" /> <path stroke-linecap="square" stroke-width="6" stroke="black" d="M 50 90 L 300 90" /> </g> </svg> </body> </html>
Output
Open textSVG.htm in Chrome web browser. You can use Chrome/Firefox/Opera to view SVG image directly without any plugin. Internet Explorer 9 and higher also supports SVG image rendering.stroke-dasharray
<html> <title>SVG Stroke</title> <body> <h1>Sample SVG Stroke</h1> <svg width="800" height="800"> <g> <text x="30" y="30" >Using stroke-dasharray: </text> <path stroke-dasharray="5,5" stroke-width="6" stroke="black" d="M 50 50 L 300 50" /> <path stroke-dasharray="10,10" stroke-width="6" stroke="black" d="M 50 70 L 300 70" /> <path stroke-dasharray="20,10,5,5,5,10" stroke-width="6" stroke="black" d="M 50 90 L 300 90" /> </g> </svg> </body> </html>
No comments:
Post a Comment