Javascript 使用图像填充SVG多边形

这是本书的延续

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

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

及

变量“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>

---

图像（即

标记）需要宽度和高度属性。图案没有点属性。谢谢，你知道如何用与多边形相同的点剪裁图像吗？不确定你的意思，如果你做对了，图像将以剪裁到多边形的方式显示。干杯，@RobertLongson。。我可以直接在多边形元素下放置一个，我可以处理它，但是还没有发现我的错误，将它作为模式应用到模式ID。我已经用我当前的尝试更新了问题，在“是否有帮助”下。如果没有更多帮助，我需要查看后期处理的输出。

<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>