...

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



SABOND21
02-09-2012, 04: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...

SABOND21
02-14-2012, 12: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:

<style>
#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}
</style>



<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"/>
</object>
</a>
</div>

Sclark
08-11-2012, 04: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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum