<!-- TEMPLATE -->
<svg width="100px" height="100px" viewBox="0 0 100 100" class="hide">
<circle id="template" cx="50" cy="50" r="50" style="fill: var(--fill, blue);">
</svg>
<!-- USE TEMPLATE SEVERAL TIMES -->
<svg viewBox="0 0 100 100" class="circle circle-1">
<use xlink:href="#template">
</svg>
<svg viewBox="0 0 100 100" class="circle circle-2">
<use xlink:href="#template">
</svg>
<svg viewBox="0 0 100 100" class="circle circle-3">
<use xlink:href="#template">
</svg>.hide {
display: none;
}
.circle {
height: 100px;
width: 100px;
}
.circle-1 {
/*
This would work (cascade) if there wasn't a `fill` on the `<circle>` already, but there is (a reasonable fallback)
fill: red;
*/
--fill: red;
}
.circle-2 {
--fill: orange;
}
.circle-3 {
--fill: #f06d06;
}
body {
padding: 1rem;
}
External CSS
This Pen doesn't use any external CSS resources.