--- In svg-developers@yahoogroups.com, "Jason" <jtbarnabas@...> wrote: > > I have a project I'm working on. My goal is to display 18 images in a single > HTML document in the same space. The first is just text and is put in using > standard HTML. Over that I have placed a SVG image and I'd like to do > drawings in it using JavaScript. I only want one server call for the entire > map set. I know how to do the math to get the images and text in the SVG but > I can't get the JavaScript to do the drawings. >
What exactly do you mean by this? You can create, modify, delete and insert nodes using the standard DOM methods. I'm not sure what's a good English reference, maybe have a look here: https://developer.mozilla.org/en/Gecko_DOM_Reference > > The one that works is 18 different pages and takes up over 175kb of file > space. The one that doesn't work yet will be less than 10kb. > If your goal is to save space, I'd suggest using more organized SVG. Good ideas would be to use a pattern for the background grid and avoid repeated style and transformation attributes, maybe like this (it's a modified version of your Moravia diagram): <?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink"; version="1.1" height="540" width="540"> <style type="text/css"> text {fill:black; font-size:16; font-weight:bold; text-anchor:end;} line {stroke:#C0C0C0;} </style> <defs> <rect id="marker" width="6" height="6"/> <pattern id="grid" width="45" height="45" patternUnits="userSpaceOnUse" viewBox="-22.5 -22.5 45 45"> <line x1="-22.5" x2="22.5"/> <line y1="-22.5" y2="22.5"/> <use xlink:href="#marker" x="-3" y="-3" fill="red"/> </pattern> </defs> <g transform="translate(28)"> <text y="56">207</text> <text y="101">225</text> <text y="116">231</text> <text y="146">243</text> <text y="191">261</text> <text y="236">279</text> <text y="278">297</text> <text y="292">300</text> <text y="326">315</text> <text y="371">333</text> <text y="416">351</text> <text y="446">363</text> <text y="461">369</text> <text y="506">387</text> </g> <g transform="rotate(-90) translate(0,5)"> <text y="40">603</text> <text y="85">621</text> <text y="100">627</text> <text y="130">639</text> <text y="175">657</text> <text y="220">675</text> <text y="265">693</text> <text y="283">700</text> <text y="310">711</text> <text y="355">729</text> <text y="400">747</text> <text y="430">759</text> <text y="445">765</text> <text y="490">783</text> </g> <line y2="540" x2="100" y1="31" x1="100"/> <line y2="110" x2="540" y1="110" x1="31"/> <line y2="540" x2="265" y1="31" x1="265"/> <line y2="275" x2="540" y1="275" x1="31"/> <line y2="540" x2="283" y1="31" x1="283"/> <line y2="283" x2="540" y1="283" x1="31"/> <line y2="540" x2="430" y1="31" x1="430"/> <line y2="440" x2="540" y1="440" x1="31"/> <rect fill="url(#grid)" height="509" width="509" x="13" y="4" transform="translate(18,27)"/> <g fill="green"> <use y="107" x="97" xlink:href="#marker"/> <use y="107" x="262" xlink:href="#marker"/> <use y="107" x="427" xlink:href="#marker"/> <use y="272" x="97" xlink:href="#marker"/> <use y="272" x="427" xlink:href="#marker"/> <use y="437" x="97" xlink:href="#marker"/> <use y="437" x="262" xlink:href="#marker"/> <use y="437" x="427" xlink:href="#marker"/> </g> <use fill="blue" y="280" x="280" xlink:href="#marker"/> </svg> ------------------------------------ ----- To unsubscribe send a message to: svg-developers-unsubscr...@yahoogroups.com -or- visit http://groups.yahoo.com/group/svg-developers and click "edit my membership" ----Yahoo! Groups Links <*> To visit your group on the web, go to: http://groups.yahoo.com/group/svg-developers/ <*> Your email settings: Individual Email | Traditional <*> To change settings online go to: http://groups.yahoo.com/group/svg-developers/join (Yahoo! ID required) <*> To change settings via email: svg-developers-dig...@yahoogroups.com svg-developers-fullfeatu...@yahoogroups.com <*> To unsubscribe from this group, send an email to: svg-developers-unsubscr...@yahoogroups.com <*> Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
