Reusing symbol with masked image

[YuriyG]

How many full-screen SVGs is too many?

I have this symbol:

  <symbol id="tile" pointer-events="visible">

    <mask id="mask">
      <rect id="cut"  width="75" height="75" class="borderCorners" />
    </mask>

    <svg id="back" mask="#mask" width="300" height="300">
          <image href="images/4.png"  pointer-events="none" />
    </svg>

  </symbol>

And then I use it 9 times. Works on the sim, doesn't even render correctly or even reboots physical device.

[JonFitbit]

I think there's 2mb of graphics memory, so you might be hitting some limit there.

What's the end result? Could you just change the image href instead of having multiple fullscreen svgs?

[YuriyG]

The idea is to let user upload their own full screen image and then using mask split it into tiles for slide puzzle. So I need multiple references to the same image and different mask position.

I finally made it work on the device. I also thought I was hitting memory limits - due to real image/svg dimensions. So I made symbol 3 times smaller and then scale it to full size via group transform (I also ditched the SVG, realizing I can mask symbol itself):

    <mask id="mask">
      <rect width="25" height="25" class="borderCorners" />
    </mask>

  <symbol id="tile" pointer-events="visible" mask="#mask" width="100" height="100" >
      <image id="back" href="images/4.png"  pointer-events="none"/>
  </symbol>

<g transform="scale(3)">
  <use href="#tile" id="0_0" /><use href="#tile" id="0_1" />
  <use href="#tile" id="0_2" />...
</g>

And I can't tell a difference from the original image.

[YuriyG]

The only problem with this approach - I have a "onmousedown" event attached to these "use" tile elements that move a tile on tap (changes x or y coordinate). It works fine, but every now and then there's a "hiccup"  - 2-3 seconds delay between tap and move. Strange thing is - if I don't assign "layer" property of these tiles (to any value, really) - tap doesn't work at all.