I've scoured the internet looking for a solution to my problem, but nothing seems to work. Is it possible to have multiple SVG shapes share their shape by defining it in one central location? From what I've researched, it looks like SVG shapes can only be defined inline.
For instance:
//shape
<svg class="star" width="12cm" height="4cm" viewBox="0 0 1200 400">
<polygon fill="lime" stroke="blue" stroke-width="10"
points="850,75 958,137.5 958,262.5 850,325 742,262.6 742,137.5" />
</svg>
<br>
//same shape
<svg class="star" width="12cm" height="4cm" viewBox="0 0 1200 400">
<polygon fill="lime" stroke="blue" stroke-width="10"
points="850,75 958,137.5 958,262.5 850,325 742,262.6 742,137.5" />
</svg>
...
There are many drawbacks to inline definitions like this that I won't even bother listing.
What I'd really like is to do something along these lines:
HTML
<svg class="star"><polygon /></svg><br>
<svg class="star"><polygon /></svg><br>
<svg class="star"><polygon /></svg><br>
<svg class="star"><polygon /></svg><br>
<svg class="star"><polygon /></svg><br>
<svg class="star"><polygon /></svg><br>
...
And then have all the shapes defined in one place, like so.
CSS
.star {
width: 12cm;
height: 4cm;
viewBox: 0 0 1200 400;
}
.star polygon {
fill: lime;
stroke: blue;
stroke-width: 10px;
points: [850,75 958,137.5 958,262.5 850,325 742,262.6 742,137.5];
//I've tried quotes, no quotes, quotes around the numbers.
}
However, despite my attempts and research, nothing has worked so far. I haven't come across any examples or resources that offer alternative methods to defining the points inline.
There must be a more efficient way! Or maybe I just haven't found the correct syntax.
EDIT: The closest thing I've found is this resource on SVG patterns.