How do I accurately add SVG Interactivity to a file created with Adobe Illustrator CS2?

Which plug in?

If you will post your SVG code, I will try and help you. Please point out the object in which you want to add the interactivity.

<text onclick="evt.target.ownerDocument.currentTranslate.x=305.656;evt.target.ownerDocument.currentTranslate.y=377.094" onload="initBlackBoard(evt)" transform="matrix(1 0 0 1 99.4814 744.2944)" font-family="'Myriad-Roman'" font-size="12">Rainey</text>
            </g>

The text "Rainey" is what I want to add the interactivity to.

**SP2 plugin

Did you have any luck with my question? I wasn't sure if you had made any progress?

Maybe there is a way that I can use the document I have as a parent document and reference a copy of the same document. By this I mean add SVG interactivity (onclick) to a specific point in the parent document that will access the copy and zoom in to a specific defined location in that document. It sounds like a good idea, but I am going to have to do some research to understand how to go about it.

Any ideas would be greatly appreciated.

Here is a little more detailed information about the task I am having problems with:

I have created a SVG file using Adobe Illustrator CS2.  The file (a one-line diagram of electrical substations) is viewable to the user via Internet Explorer 6.0.  To view the complete diagram it has to be compressed to fit the user's screen which renders it almost unreadable because the text is so small.  I would like to click on a substation name from a drop-down list or from just a list of substation names such that the user will be taken to the specific coordinates on the diagram where that particular substation will be displayed  full screen.  An acceptable option would be to have a new IE window open up with the selected substation displayed full screen.  I think I would also need a way to get back to the main diagram in order to choose another substation.  

Can someone please help me accomplish this?  I am open to suggestions.

Thanks, lostinspace9

It would be easier for me if you could attach an SVG. I can put up some sample code, I guess, but it would be up to you to implement into your solution.

kmartin7 - It will not let me upload an .svg or a .zip file. How can I get this file to you?

Here are instructions pertaining to my file once I get it through to you:
To be more specific, my objective is to view the "Location Index" at about 300%. When I click on the text "PIT-POT", the viewable area should move to coordinates X:83.123 pt Y:356.504 pt W:39.191 pt H:13.044 pt and remain at the zoom level of 300%. Please let me know if I can provide further information.

Does anyone else know how I can get my file uploaded?

Use ee-stuff.com

I am assuming that because I cannot upload my file, I will not be able to receive assistance on this question. I have looked over your help page. I am open to any further suggestions you may have.

Please zip and upload the file using the site ee-stuff.com

Log in using your ee password, use the id of this question, upload your file

Thank you. I have uploaded the file to ee-stuff.com for Question ID: 23144425

I was wandering if either mplungjan or kmartin7 (or anyone else) had a chance to review the file I uploaded?

I'm sorry, but I have been swamped at work and I have a ton of stuff to review before week's end. I'll *try* to take a look later in the week.

Okay. Thank you!

And I was only commenting on the file upload stuff :)

Oh, well I thank you for the instructions on the upload. :)

Can you put the coordinates into a class attribute? Might make things a bit easier for me.

would you like me to upload the file again on ee-stuff?

no - I have it. I am trying to pan to a specific portion of the SVG. Your original question was:

"...the current view to automatically pan to a specific location (designated coordinates) in the document"

I need to know where these coordinates will exist, i.e. do you intend to capture current coordinates from text (such as within <text transform="matrix(1 0 0 1 412.0439 243)"/> (coords being "412.0439" and  "243") or are you going to manually set the coordinates via the script you are asking for?

I plan on capturing the coordinates, such as within <text transform="matrix(1 0 0 1 412.0439 243)"/>

https://filedb.experts-exchange.com/incoming/ee-stuff/7042-pith.zip

Unzip, open pith.htm. Click on on of the words under "Location Index" (such as PIT-TAR, PIT-GUE or PIT-POT). It should pan and zoom you to a spot on the SVG based on the associated id and transform attributes. Look for onclick event in the SVG to see how to call it.

It appears from your snippet above(<text transform="matrix(1 0 0 1 412.0439 243)"/>) that I am panning/zooming to the wrong spots, but you can change as you need. Just add the ID value of the element you want to zoom/pan to in the script call in the onclick event.

Thanks, I'll give it a try today and get back to you by tomorrow. Thanks again.

I may not be on the same track as you in regards to the numbers defined in the matrix section. The zoom is going where I want it to go, but I am actually going to have to apply this to a different display and the coordinates I get in Illustrator for, for instance PIT-TAR, is not what is listed in the matrix list. So, how exactly are you getting these numbers?

Can you please attach the portion of the jscript that you altered and tell me what exactly you used to change it? I figured out how you are getting the coordinates, but I am not having much luck transferring the information into my other file. I keep getting a JScript runtime error that says "Object Expected".

Thanks,
Suzanne

Are you getting this error when you click the SVG or the HTML?

Can you post a sample of one of the changes? It would be easier for me to find out what is wrong vs. trying to list all the permutations of changes I made.

Thanks.

I am getting the error when clicking on the SVG (This is my SVG file which is not the same as the one you made changes to.). I added the following to my code. This is all that I changed.

<text id="XMLID_7199_" transform="matrix(1.12 0 0 1 18.093 684.887)" fill="#3A0F82" font-family="'Myriad-Roman'" onclick="javascript:zoom_standID('XMLID_6199_')" font-size="1.4">NAME1</text>

This line already existed, I just added the "onclick" portion.

Did you add the script I added to the SVG you sent me? At the bottom of the SVG, you'll see it, it starts with a character data escape. Copy all of the data between the <script> tags as show below into your SVG:

<script type="text/javascript">
<![CDATA[

...

]]></script>

Make sure you add the ID value to the script properly (it appears as though you did in the example above).
Kurt

Okay. I completely missed that. I added that portion to my text and it got rid of the error. I need to figure out why it isn't going completely to the location I specify.

If you want to post your updated SVG to ee-stuff.com, I can take a look at it. Just tell me what it is you want clicked and zoomed to.

Unfortunately, I am restricted to providing only the sample display. Would it be possible for you to explain the script that you added to the display? I wouldn't need everything explained, just the portions that would change depending on the parameters of a different file.

I never received an answer to my last question. I wanted an explaination to the script added. Can we possibly get kmartin7 to reply to my last post. I do not wish to have this question removed if at all possible. I am still working on it myself.

Thank you,
lostinspace9

Thank you so much. I will make sure I post in the next few days if he/she does not respond. Thanks again for your help.

lostinspace9

I apologize for not being able to get to completing your answer. My dad is very ill and I have been spending all my 'extra' time with him and my mom. I am on business travel this week, so I might have some time to type out an answer tomorrow if the meeting goes slowly.

Thank you for understanding,

kmartin7

I am so sorry. I will keep your family in my prayers. If you get time, that would be great. If not, I completely understand.

Kindest Regards,
Lostinspace9

Thank you. I am on my way to the hospital now - he is in ICU.

What does "Tagged for future cleanup" mean exactly? I still hope to be provided with more information.

Thank you,
Lostinspace9

Thank you.

kmartin7,

How is your father doing? I need to keep this question open, so I am checking on any updates.

Thanks,
lostinspace9

lostinspace9:

I apologize, but I forgot about this question. My dad is doing a bit better, but still in the hospital. Thank you for asking.

I sent an HTML and SVG file in the original I sent you. The reason I inserted the SVG into an HTML page was to provide a means of resetting the view (notice the reset view link at the top-right of the HTML page). I will describe what needs to be done for each SVG and HTML, starting with SVG.

For SVG scripting:

The script I added at the bottom is generic and will work for all your SVGs. You can include in an external script and point to it from the SVG using:

<script xlink:href="path/myscriptname.js" type="text/ecmascript"/>

I also added an ID value to the root SVG element (id="mySVG") so that I can access the SVG through scripting. Make sure you have an ID for each of your SVGs so you can access via javascript.

In the bottom, left-hand corner of the SVG you sent me, it has a "location index". I used this as the point of interactivity. If you will look in the source document for the text element with the ID value of "XMLID_126_", you will see a javascript call within that same text element  that reads:

onclick="javascript:zoom_standID('XMLID_102_')

This javascript call is to be placed on the element that you want the user to click on to zoom to a specific area. The array value "'XMLID_102_" contains the ID for the element that you want to zoom in to. If you do a search for this ID value, you will see that it belongs to the following element:

<text id="XMLID_102_" transform="matrix(1 0 0 1 296.1226 566.5391)" d="M296.123,566.539" fill="#240000" font-family="'Myriad-Roman'" font-size="12">PIT-TAR</text>

What the script does is finds the element ID, then performs a zooming function that will zoom into a configurable area. If you want to change the area of margin it zooms in to, the change the following value in the javascript:

var margin = 76.0

To a pixel value you want as your zoom margin.

So to add zooming to various elements within your SVGs, simply add the javascript call to an element within your SVG that you want the user to click, with each javascript call pointing to the ID value you want to zoom in to.

HTML:

I simply embedded the SVG into an HTML page, then added the script that will zoom the SVG out to the original view:

<embed width='973' height='703' id="Pithecia" name="Pithecia" type="image/svg+xml" src="Pithecia_3.svg"></embed>

I gave it an id value of "Pithecia" in this instance, which is needed for scripting purposes.

Now notice the script in the HTML page. You can add the entire script to the HTML page, but there are a couple of places that you will need to change depending on the id value of the embed and the id value of the SVG you are embedding (ref. id="mySVG" above).

The two places you will need to change anything are as follows:

document.embeds['Pithecia'].getSVGDocument().getElementById('mySVG').setAttribute('viewBox',newViewBox);

Change the embeds value (['Pithecia']) to the value of the embeds id in the HTML document. Also change the getElementById value ('mySVG') to match the ID attribute value of the SVG you are embedding.

Do the same for the following:

var viewBox = document.embeds['Pithecia'].getSVGDocument().getElementById('mySVG').getAttribute('viewBox');

That should explain it all. I am sure you have questions.

Thanks,

kmartin7

Thank you for the explanation. It looks like it is trying to work on my file. It moves the screen twice from the original location, but no to where I have it pointed to and it doesn't zoom in at all. Here are the dimensions of the file I am using now.

width="1246.14" height="730.009" viewBox="0 0 1246.14 730.009" overflow="visible" enable-background="new 0 0 1246.14 730.009"
       xml:space="preserve">

I have to zoom in to the bottom level just to view the name in order to click on it. Any ideas?

It is really hard to say since I can't see the code and can't tell what you want to click on and what to zoom to. Can you post any of the pairs of code (onClick and id you want to zoom to)? Maybe you can add the areas you want to zoom to in a wrapping HTML file with links that provide zooming to the areas (since it is quite a large SVG area)?

I am going to try to remove most of the data from the file and send you something. Let me work on that. Hopefully I can have something posted today. :)

ok

kmartin7,

I uploaded a file to ee-stuff.com. It is under ID number 21854868.

Thanks,
lostinspace9

Thank you so much for your patience and help with this question!! Your explainations were extremely easy to follow. I still have some work to do on my end, but you have answered my original question.
Thanks again. I will continue to keep your family in my prayers.