是否可以将图像图案应用于多个多边形？

Question

我希望能够将图像应用于多个多边形。我尝试使用类，但似乎只有id起作用。

var def = document.createElementNS("http://www.w3.org/2000/svg", "defs");

var pattern = document.createElementNS("http://www.w3.org/2000/svg", "pattern");
pattern.setAttribute('id', 'capital-pattern');
pattern.setAttribute('x', '0%');
pattern.setAttribute('y', '0%');
pattern.setAttribute('height', '100%');
pattern.setAttribute('width', '100%');
pattern.setAttribute('viewBox', '0 0 64 64');

var image = document.createElementNS("http://www.w3.org/2000/svg","image");
image.setAttribute('x', '7');
image.setAttribute('y', '2');
image.setAttribute('width', '50');
image.setAttribute('height', '50');
image.setAttribute('href', 'https://image.flaticon.com/icons/svg/725/725871.svg');

pattern.appendChild(image);
def.appendChild(pattern);

$('svg')[0].appendChild(def);

var use = document.createElementNS("http://www.w3.org/2000/svg", "use");
use.setAttribute('href', '#capital');
use.setAttribute('fill', 'url(#capital-pattern)');
$('svg')[0].appendChild(use);

var wrapper = document.createElementNS("http://www.w3.org/2000/svg", "g");
wrapper.setAttribute('id', 'capital');

$('#chosen-one').wrap(wrapper);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <svg tabindex="1" style="width: 175px; height: 216.506px;">
      <polygon points="25,0 75,0 100,43 75,86 25,86 0,43" tabindex="1" hex-row="0" hex-column="0" fill="gray"></polygon>
      <polygon points="100,44 150,44 175,87 150,130 100,130 75,87" tabindex="1" hex-row="0" hex-column="1"  fill="gray"></polygon>
      <polygon id="chosen-two" points="25,87 75,87 100,130 75,173 25,173 0,130" tabindex="1" hex-row="1" hex-column="0" fill="gray"></polygon>
      <polygon id="chosen-one" points="100,130 150,130 175,173 150,216 100,216 75,173" tabindex="1" hex-row="1" hex-column="1" fill=""></polygon>
    </svg>

现在，只有一个多边形能够显示图像。有什么办法可以选择多个多边形来显示图像？