Can you define multiple definitions inside a defs tag in SVG?
Can you define multiple definitions inside a defs tag in SVG?
Is it OK to use multiple definitions inside a single def tag at the root of the document?
An example:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<svg width="0" height="0">
<defs>
<linearGradient id="Gradient01">
<stop offset="20%" stop-color="#39F" />
<stop offset="90%" stop-color="#F3F" />
</linearGradient>
<linearGradient id="Gradient02">
<stop offset="00%" stop-color="#3F3" />
<stop offset="50%" stop-color="#39F" />
<stop offset="90%" stop-color="#F55" />
</linearGradient>
</defs>
</svg>
<svg width="800px" height="300px"
xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="200" height="20"
fill="url(#Gradient01)" />
<svg width="380px" height="330px"
xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="50" width="200" height="20"
fill="url(#Gradient02)" />
</svg>
</svg>
</body>
</html>
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.