3

I have the following SVG elements containing markers to be displayed on a map in a web page. The markers are composed of the <image> elements referencing to various small PNG images:

<svg id="OL_105_svgRoot" width="1246" height="373" viewBox="0 0 1246 373">
 <g id="OL_105_root" style="visibility: visible;" transform="">
  <g id="OL_vroot">
   <image id="P115" cx="843" cy="203" r="1" x="827" y="188" width="32" height="32" href="spider.png" ...>
   <image id="P119" cx="453" cy="269" r="1" x="437" y="254" width="32" height="32" href="zoo.png" ...>
   <image id="P123" cx="628" cy="82" r="1" x="612" y="67" width="32" height="32" href="wild.png" ...>
   <image id="P131" cx="10495" cy="69" r="1" x="1034" y="53" width="32" height="32" href="export.png" ...>
...
  </g>
 </g>
</svg>

Is there any way I can replace those images with a single large image file and use something similar to CSS background-position property to specify the viewing window for each image?

Question Overflow
  • 10,925
  • 18
  • 72
  • 110

1 Answers1

2

Wrapping the <image> elements into inner <svg> elements, specifying a certain width and height on the <svg> element and the "background-position" on the <image> element using the x and y attributes might be a solution:

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <svg width="17" height="19">
    <image xlink:href="http://s14.postimage.org/f66u116ap/rainbow_Hello_World4.png" width="188" height="19"/>
  </svg>
  <svg width="17" height="19" x="12" y="19">
    <image xlink:href="http://s14.postimage.org/f66u116ap/rainbow_Hello_World4.png" width="188" height="19" x="-17"/>
  </svg>
  <svg width="17" height="19" x="35" y="6">
    <image xlink:href="http://s14.postimage.org/f66u116ap/rainbow_Hello_World4.png" width="188" height="19" x="-34"/>
  </svg>
  <svg width="17" height="19" x="46" y="14">
    <image xlink:href="http://s14.postimage.org/f66u116ap/rainbow_Hello_World4.png" width="188" height="19" x="-51"/>
  </svg>
  <svg width="17" height="19" x="60" y="24">
    <image xlink:href="http://s14.postimage.org/f66u116ap/rainbow_Hello_World4.png" width="188" height="19" x="-68"/>
  </svg>
</svg>

(See a test on Tinkerbin.)

You could also use the clip-path attribute, but I guess this is even more tedious than the above solution.

Thomas W
  • 14,757
  • 6
  • 48
  • 67
  • I can't change the document structure as the `` elements are automatically generated by the map API. Could this be done by altering the attributes of the image elements? – Question Overflow Nov 16 '12 at 08:46
  • Yes, it could be done using the `clip-path` attribute, but I'm very sorry I can't elaborate more about this right now. – Thomas W Nov 16 '12 at 08:53
  • Thanks so much for this! This can also be used for sprite animations: http://jsfiddle.net/syyvp700/ – VirtuosiMedia Oct 12 '15 at 23:54