Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Location
    Toronto, ON, Canada
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Make SVG inserted through <object> clickable

    Quote Originally Posted by oesxyl View Post
    Code:
    <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...

  • #2
    New to the CF scene
    Join Date
    Feb 2012
    Location
    Toronto, ON, Canada
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>

  • #3
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thank you!

    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •