navigating in different svg like html anchors

Discuss SVG code, accessible via the XML Editor.
LXCU
Posts: 3
Joined: Fri Feb 11, 2011 11:35 pm

navigating in different svg like html anchors

Postby LXCU » Fri Feb 11, 2011 11:55 pm

hi guys,

first: im a bloody beginner with svg, sorry for any dumb question ;)

my question: id like to navigate through different SVG files like with.html

User avatar
tomh
Posts: 218
Joined: Sat Feb 14, 2009 10:14 pm

Re: navigating in different svg like html anchors

Postby tomh » Mon Feb 14, 2011 3:03 am

Sorry for scattergun approach and not a very helpful/easy to follow answer...

1) http://tutorials.jenkov.com/svg/a-element.html
2) http://www.w3.org/TR/SVG/linking.html

Linking out of svg:

need to add an <a xlink:href="http://www.example.com">...</a> around objects that you want to click to like to; and add the xlink namespace in the <svg> tag like so:

Code: Select all

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" ...>


Linking into specific portion of the svg file

right click -> object properties -> id to set the id of an object you want to link to; then to link to it do something like: <a href="MyDrawing.svg#MyView" to link to an object. think this will scale the drawing to just show that object...

From w3.org:
An SVG fragment identifier can come in two forms:

  • Shorthand bare name form of addressing (e.g., MyDrawing.svg#MyView). This form of addressing, which allows addressing an SVG element by its ID, is compatible with the fragment addressing mechanism for older versions of HTML.
  • SVG view specification (e.g., MyDrawing.svg#svgView(viewBox(0,200,1000,1000))). This form of addressing specifies the desired view of the document (e.g., the region of the document to view, the initial zoom level) completely within the SVG fragment specification. The contents of the SVG view specification are the five parameter specifications, viewBox(...), preserveAspectRatio(...), transform(...), zoomAndPan(...) and viewTarget(...), whose parameters have the same meaning as the corresponding attributes on a ‘view’ element, or, in the case of transform(...), the same meaning as the corresponding attribute has on a ‘g’ element).

see the link above for the details (and don't ask me to explain them - I don't really understand them ;)

rosros
Posts: 68
Joined: Fri Aug 24, 2007 12:54 am

Re: navigating in different svg like html anchors

Postby rosros » Wed Aug 10, 2011 4:59 pm

Example:
cut and paste this into a text editor and save the file as "svglink.svg"

Code: Select all

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <a xlink:href="svg/link2.svg" target="_top">
        <rect x="10" y="20" width="75" height="30"
                style="stroke: #333366; fill: #6666cc"/>
    </a>
</svg>


create a 'svg' subdirectory; then
cut and paste this into a text editor and save the file as "link2.svg"
in the svg subdirectory:

Code: Select all

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <a xlink:href="../svglink.svg" target="_top">
        <rect x="10" y="20" width="75" height="30"
                style="stroke: #333366; fill: #ff0000"/>
    </a>
</svg>


Open svglink.svg with Firefox; press the blue rectangle ...


Return to “SVG / XML Code”