SVG

[AJ75]

Hi !I´m trying to use a link from a clip-path in an SVG-File, embded in HTML.Anyone can help, please ??Thanx !!AJ

[boen_robot]

I don't know how this clipPath element works, so sorry if that's not what you meant, but... well...In order to use any links, you'll need to know XLink. This example demostrates how to use an XLink inside SVG.

[AJ75]

Hi boen_robot !Thanx for your reply !The Links on my SVG-Player (play, stop...) emded in HTML works fine, but not the Links on the Objekts in my "screen" as a clip-path !! Scrolling the SVG-file in the clip-path is also ok.Thany, AJ

[boen_robot]

I still don't understand completely (though I think I got the idea)... care to give the code and point the part that's not working?

[AJ75]

My player.svg with following code:

<defs><clipPath id="ermo">    <rect x="161.0" y="129.0" width="220.0" rx="70" height="273.0" ry="30" stroke="#ffffff"/></clipPath></defs><g clip-path="url(#ermo)">        <image x="0" y="0" width="1000" xlink:href="test.svg" height="1000" id="ermo_2" onmousedown="StartScroll(evt,220,273)" onmouseup="StopScroll(evt)" onmousemove="DoScroll(evt)"/></g>

The test.svg is a svg-file transformed from a xml-file. It includes some graph-objects with links on them.Here is the StartScroll function:

function StartScroll(click_evt,p_clip_width,p_clip_height){ is_scrolling=true; scroll_obj=evt.getTarget(); start_x=evt.getClientX(); start_y=evt.getClientY(); min_scroll_x=-parseInt(scroll_obj.getAttribute("width"))+p_clip_width; min_scroll_y=-parseInt(scroll_obj.getAttribute("height"))+p_clip_height;}

Hope this helps.

[boen_robot]

omg! Where have you learnt SVG from? You already know (a lot?) more then I do (after reading thorugh the SVG tutorial and some of the reference).I can't help you scince this thing has scripts as well. I'm not good with JavaScript and DOM.

[AJ75]

After searching the Web, I found out where my problem is: You can´t use Links in an <image>-Element ! But my problem is still there ! How can I use Links in an clippath in SVG ??? Can anyone help me, PLEASE ????? Thanx,AJ

[boen_robot]

How about placing a transparent rectangle over the image (create a group and manipulate it's size and position to avoid emty places or unclickable parts) and apply the link ot it instead?

[AJ75]

I´ve tried that like this:My clippath between <defs>:<

clipPath id="interface">            <rect x="14.0" y="75.0" fill="none" width="220.0" rx="70" id="rect" ry="30" height="273.0"/>        </clipPath>

and the content of that clippath:

<g clip-path="url(#interface)"><use onmousedown="StartScroll(evt,220,273)" width="400" height="600" onmouseup="StopScroll(evt)" onmousemove="DoScroll(evt)" x="15.0" y="45.0"  xlink:href="some.svg#text"/></g>

Viewing this in Batik, the Text and Links are shown, but no scrolling is available.In IE6 I can´t see anything!!!!I have to show the Text and Links in clippath and do the scrolling in IE6 !!Don´t know why the IE can´t handle that !! ??