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
navigating in different svg like html anchors
Re: navigating in different svg like html anchors
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:
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:
see the link above for the details (and don't ask me to explain them - I don't really understand them
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
Re: navigating in different svg like html anchors
Example:
cut and paste this into a text editor and save the file as "svglink.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:
Open svglink.svg with Firefox; press the blue rectangle ...
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 ...