SVG <solidcolor> Element
Last Updated :
31 Mar, 2022
SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations in HTML web structure. The <solidcolor> element define a single color in multiple places for an SVG input. It defines a palette and allow it to use consistently throughout a document.
Syntax:
<solidColor />
Attributes: It has no specific attribute.
Example 1:
HTML
<!DOCTYPE html>
<html>
<body>
<svg viewBox="0 0 200 200">
<defs>
<solidColor id="color"
solid-color="#a080ff"
solid-opacity="0.5" />
</defs>
<g>
<rect fill="none" stroke="blue"
x="6" y="6" width="15"
height="15" />
<rect fill="url(#color)"
stroke="black" stroke-width="2"
x="1" y="1" width="25"
height="25" />
</g>
</svg>
</body>
</html>
|
Output:
Example 2:
HTML
<!DOCTYPE html>
<html>
<body>
<svg viewBox="0 0 220 220">
<defs>
<solidColor id="MyLightPurple"
solid-color="black"
solid-opacity="1" />
</defs>
<rect fill="url(#MyLightPurple)"
stroke="black" stroke-width="5"
x="6" y="6" width="20"
height="20" />
</svg>
</body>
</html>
|
Output:
Share your thoughts in the comments
Please Login to comment...