0

This is a continuation of Good way to map custom-shaped HTML elements responsively for a board game

There are three polygons at the bottom of the board which need to have an image as their fill. I've attempted to use 

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

and

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

the variable 'points' is derived from a function that takes the inner view dimensions to normalize the pixels to match percentages.

Thanks!

[EDIT]

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

Bottom white spaces need to be filled with image.

irth
  • 1,696
  • 2
  • 15
  • 24
  • 1
    images (i.e. the `` tag) need width and height attributes. pattern does not have a points attribute. – Robert Longson Jan 27 '16 at 19:54
  • Thanks, any idea how to clip the image with the same points as the polygon? – irth Jan 27 '16 at 23:44
  • not sure what you mean the image will display as if it's clipped to the polygon the way you're doing it if you get it right. – Robert Longson Jan 27 '16 at 23:46
  • Cheers, @RobertLongson.. I'm able to put an directly under the polygon element, which i can deal with, but don't see my mistake yet applying it as a pattern with reference to the pattern ID. I've updated the question with my current attempt under [EDIT] if it helps you help me. – irth Jan 28 '16 at 01:21
  • If you wnt any more help I'd need to see the post processed output. – Robert Longson Jan 28 '16 at 06:08

0 Answers0