Ad
Is There Any Way To Make An SVG Object Clickable?
I'm working with the SVG that can be viewed here: http://n1t2.info/
I would just post the SVG, but because of the street maps layer the file is extremely large. However, you can see if you click the link that it's a map divided into 18 different svg paths, with a number of different colors shading them. My goal with this map is to make each of the 18 different sections clickable, or be able to give them an <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="example.com">
. Is this possible with SVGs at all?
edit: A comment suggested a show the way that I'm constructing the SVG file. You can see my method for that here.
Ad
Answer
IMO, the best solution is the SVG <a>
element.
<svg width="200" height="200" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<a xlink:target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="http://stackoverflow.com/questions/15532371/do-svg-docs-support-custom-data-attributes">
<path d="M 100 100 L 300 100 L 200 300 z" fill="orange" stroke="black" stroke-width="3"></path>
</a>
</svg>
Ad
source: stackoverflow.com
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
Ad