View Full Version : Make SVG inserted through <object> clickable

02-09-2012, 05:12 AM
<object data="Copyleft.svg" codetype="image/svg+xml" style="width: 197px; height: 197px;"></object>

Does anybody know, how can I make make <object>...</object> clickable - because as I know <a href...></a> round <object> doesn't work...

02-14-2012, 01:23 AM
Problem solved.

I have used z-index to make the whole parent DIV clickable and have placed it over <object>. The reason why I wanted it is that I need to browsers which can handle vector graphics would use SVG, but those who can't use raster images and this whole thing works in all browsers (I think so). The code is something like this:

#start {
width: 250px;
height: 250px;
padding-left: 150px;
float: right;
z-index: 1;
position: relative;}

#start a {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer; }

#start a:hover {text-decoration: none;}

.content {z-index: -1; position: relative}

<div id="start">
<a href="www.example.com" target="_blank">
<object class="content" type="image/svg+xml" width="250" height="250" data="design/images/star.svg">
<img width="250" height="250" src="design/images/star.png" alt="Star"/>

08-11-2012, 05:23 PM
Thank you, finally. My biggest problems with comments on SVG is that no one ever tells you where code should go. In the HTML or in the SVG file or in Jquery. Just for something simple as making a svg logo on the page click back to the home state.