SVG style Attribute
Last Updated :
31 Mar, 2022
The style attribute helps us to style an element using CSS declarations. It works very much similar to the style attribute of HTML. Almost all the elements are using this attribute.
Syntax:
style = "<style>"
Attribute values: The style attribute accepts the values mentioned above and described below.
- style: The syntax of style data depends on the provided CSS.
Below examples illustrate the use of the style attribute.
Example 1:
HTML
<!DOCTYPE html>
<html>
<body>
<svg viewBox="-10 -5 1220 520"
<defs>
<marker id="geek"
viewBox="0 0 10 10"
refX="1" refY="5"
markerUnits="strokeWidth"
markerWidth="7"
markerHeight="7"
orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z"
fill="green"/>
</marker>
</defs>
<polyline points="20, 20 40, 25 60,
40 80, 120 120, 140 200, 180"
style="fill:none;stroke:green;
stroke-width:3"
marker-end="url(#geek)"/>
</svg>
</body>
</html>
|
Output:
Example 2:
HTML
<!DOCTYPE html>
<html>
<body>
<svg viewbox="0 0 150 60"
<circle cx="12" cy="12" r="10"
style="fill: lightgreen;
stroke: green;
stroke-width: 2;"/>
</svg>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...