使用图像填充SVG多边形

Question

这是Good way to map custom-shaped HTML elements responsively for a board game

的延续

电路板底部有三个多边形，需要将图像作为填充。我试图使用

background:url(image.png); 
background-size:cover;

和

<defs ng-if="$parent.cool.di.models.spaces[space].img">
    <pattern id="img-{{space}}" patternUnits="userSpaceOnUse" points="{{points}}">
         <image xlink:href="{{cool.di.models.spaces[space].img}}"  />
    </pattern>
</defs>
<svg ng-style="{position:'absolute', background:'none', overflow: 'visible'}">
    <g>
         <polygon points="{{points || '0,0 0,10 10,10 10,0 0,0'}}" stroke="black" fill="{{bgColor || 'gray'}}"></polygon>
    </g>
</svg>

变量'points'派生自一个函数，该函数采用内部视图尺寸来规范化像素以匹配百分比。

谢谢！

[编辑]

<defs ng-if="cool.di.models.spaces[space].img">
     <pattern
        id="img-{{cool.di.models.spaces[space].color}}"
        patternUnits="userSpaceOnUse"
        width="{{points.split(' ')[2].split(',')[0] - points.split(' ')[0].split(',')[0]}}"
        height="{{points.split(' ')[2].split(',')[1] - points.split(' ')[0].split(',')[1]}}">
            <image
                 xlink:href="{{cool.di.models.spaces[space].img}}"
                 ng-attr-x="{{points.split(' ')[0].split(',')[0]}}"
                 ng-attr-y="{{points.split(' ')[0].split(',')[1]}}"
                 height="100%"
                 width="100%"
                 stroke="black"
                 style="border:5px solid black"></image>
    </pattern>
</defs>
<svg ng-style="{position:'absolute', background:'none', overflow: 'visible'}">
    <g>
         <polygon
              ng-attr-points="{{points}}"
              stroke="black"
              fill="{{cool.di.models.spaces[space].img ? 'url(#img-'+cool.di.models.spaces[space].color+')' : bgColor || 'gray'}}">

         </polygon>
    </g>
</svg>