Jump to content

SVG


AJ75
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 3 weeks later...

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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 !! ??

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...