1

I have made a couple custom SVG buttons that self-contain CSS code for aesthetic changes on :hover as shown in the code snippet example.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="0.506945in" height="0.1125in" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 4494 997"
 xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
  <style type="text/css">
   <![CDATA[

#butBox {
    fill: #FF6600;
    stroke: #FF6600;
    stroke-width: 30;
    transition: all 0.4s;
}

#butTxt {
    fill: #ffffff;
transition: all 0.4s;
}

#butWrap:hover #butBox {
    fill: #ffffff;
    stroke: #FF6600;
    cursor: pointer;
}

#butWrap:hover #butTxt {
    fill: #FF6600;
    cursor: pointer;
}

   ]]>
  </style>
 </defs>
 <g id="butWrap">
   <rect id="butBox" x="31" y="31" width="4433" height="936"/>
   <g id="butTxt">
    <path class="fil1" d="M373 626l-18 0 0 -238 -82 0 0 -16 183 0 0 16 -83 0 0 238zm138 -111l0 111 -17 0 0 -254 60 0c32,0 55,5 70,17 15,12 23,29 23,53 0,17 -5,31 -14,43 -9,12 -22,20 -41,25l69 116 -21 0 -66 -111 -63 0zm0 -15l49 0c21,0 38,-5 50,-15 12,-9 18,-23 18,-42 0,-19 -6,-34 -18,-42 -11,-9 -30,-14 -57,-14l-42 0 0 113zm317 36l-103 0 -36 90 -20 0 103 -255 11 0 100 255 -20 0 -35 -90zm-97 -16l91 0 -35 -91c-3,-8 -6,-18 -10,-30 -3,11 -7,21 -10,30l-36 91zm382 -24c0,43 -12,75 -34,97 -22,22 -55,33 -99,33l-61 0 0 -254 69 0c41,0 72,10 93,31 21,22 32,53 32,93zm-20 1c0,-36 -9,-64 -28,-82 -18,-19 -45,-28 -81,-28l-47 0 0 223 42 0c76,0 114,-37 114,-113zm217 129l-139 0 0 -254 139 0 0 16 -121 0 0 96 114 0 0 17 -114 0 0 109 121 0 0 16zm364 -127c0,40 -10,72 -30,95 -20,24 -48,36 -84,36 -35,0 -63,-12 -83,-36 -20,-23 -30,-55 -30,-96 0,-40 10,-72 30,-95 21,-24 48,-35 84,-35 35,0 63,11 83,35 20,23 30,55 30,96zm-208 0c0,36 8,64 24,84 17,20 40,30 70,30 31,0 54,-10 71,-30 16,-19 24,-48 24,-84 0,-37 -8,-65 -24,-85 -17,-19 -40,-29 -70,-29 -31,0 -54,10 -70,29 -17,20 -25,48 -25,85zm452 127l-18 0 -151 -226 -1 0c1,27 2,47 2,61l0 165 -17 0 0 -254 17 0 151 225 1 0c-1,-21 -2,-41 -2,-59l0 -166 18 0 0 254z"/>
     <path class="fil1" d="M3464 372l0 16 -88 0 0 238 -18 0 0 -238 -128 0 0 238 -15 0 -179 -233 0 233 -16 0 -6 0 -12 -29 0 0 -32 -72 0 0 -8 -18 -10 -22 0 0 -43 -99 -105 240 -20 0 115 -254 22 0 99 217 0 -217 24 0 169 222 0 -222c84,0 167,0 251,0l0 0z"/>
     <path class="fil1" d="M2518 609c43,-3 62,-22 62,-58 0,-29 -17,-44 -52,-44l-52 0c-48,0 -71,-22 -71,-64 0,-41 25,-64 75,-70 14,-2 21,-1 34,-1 100,0 198,0 297,0l0 16 -87 0 0 238 -19 0 0 -238c-64,0 -127,0 -191,1 -11,0 -21,0 -33,1 -38,5 -57,22 -57,53 0,31 17,46 52,46l52 0c47,0 70,21 70,62 0,42 -32,74 -70,75l0 0 -156 0 -16 0 0 -17 0 -216 -179 233 -15 0c0,-85 0,-170 0,-254l17 0c0,74 0,148 0,222l170 -222 23 0 0 237 146 0 0 0z"/>
     <rect class="fil2" x="2094" y="372" width="16.8761" height="254.244"/>
     <path class="fil1" d="M3504 377l0 -10 0 -6 7 0 90 0c43,0 76,11 98,32 20,19 30,47 32,83 -21,-69 -52,-98 -133,-99 -25,0 -56,0 -94,0l0 0z"/>
     <path class="fil1" d="M3500 630l0 -143 30 0 0 121 64 0c34,0 59,-9 75,-27 17,-19 25,-47 25,-85 0,-33 -8,-58 -25,-74 -16,-16 -41,-24 -75,-24l-31 0 -33 0 -30 0 0 -13c37,0 68,0 93,0 80,2 112,30 133,99 1,4 1,8 1,12 0,47 -12,81 -34,105 -22,23 -55,35 -99,35l-88 0 -6 0 0 -6 0 0z"/>
     <path class="fil1" d="M4214 621l0 14c-56,2 -92,-29 -109,-70 -2,-4 -4,-8 -5,-13 -1,5 -3,9 -4,13 -17,41 -54,72 -110,70l0 -28c44,1 71,-22 84,-53 6,-13 9,-29 9,-44 1,-15 -2,-31 -7,-45 -12,-36 -41,-66 -86,-68l0 -14c49,3 87,30 108,96 7,20 9,41 15,62 18,53 51,84 105,80l0 0 0 0z"/>
     <path class="fil1" d="M4222 390c-45,2 -75,32 -87,69 -5,14 -7,30 -7,45 0,15 4,30 9,43 13,32 41,55 84,54l0 14c-54,3 -87,-27 -105,-80 -6,-21 -9,-42 -15,-63 -21,-65 -59,-93 -108,-96l-1 14 2 -28c58,3 96,41 111,88l2 5 2 -5c15,-47 53,-85 112,-88l1 28 0 0zm-113 160c-1,-1 -1,-2 -2,-4l0 0c1,2 1,3 2,4zm-116 79l0 -28 0 0 0 28zm4 -28c41,-1 68,-23 80,-54l1 0c1,-3 2,-6 3,-9 2,-6 3,-12 4,-18 0,-2 1,-4 1,-5 0,-4 0,-7 0,-11 0,-5 0,-11 0,-17 0,6 0,12 0,17 0,4 0,7 0,11 0,1 -1,3 -1,5 -1,6 -2,12 -4,18 -1,3 -2,6 -3,9l-1 0c-12,31 -39,53 -80,54zm88 -116c0,-1 0,-2 0,-3 0,1 0,2 0,3zm-11 -39c-2,-4 -4,-8 -6,-12 2,4 4,8 6,12zm-10 -17c0,-1 -1,-2 -1,-2 0,0 1,1 1,2z"/>
     <path class="fil1" d="M3765 591c0,40 29,46 56,45l126 -3 0 -10c-53,0 -98,0 -135,-1 -1,0 -1,-1 -2,-1 -32,-2 -45,-33 -45,-75l0 45z"/>
     <path class="fil1" d="M3951 613l0 -10 -125 -3c-12,0 -26,0 -26,-19l0 -72 134 -3 0 -22 -134 -3 0 -73c0,-9 0,-20 21,-20l130 -1 0 -21 -130 -5c-27,-1 -51,12 -51,47l0 129c0,42 13,73 45,75 0,0 1,0 2,0 37,2 82,2 134,1l0 0z"/>
   </g>
 </g>
</svg>

They work flawlessly as in, when I add them to my website and hover over, the aesthetic transformations trigger successfully, but when I try to tie an click event it just won't work. This is the HTML I use:

<div class="button"><object type="image/svg+xml" data="img/button.svg"></object></div>

I suspect this is related with the way I compose the HTML side, embedding an object (and not the usual img tag) within a div. I tried different things such as in-line HTML onclick and jQuery triggers, and the close I've got to making it work was with a simple:

$(".button").click(function() {
    alert('This button has been clicked.');
});

But somehow looks like the object eclipses the div since if I click on the sides of the button (still inside the div area) it triggers the alert(), but it does nothing at all if I click over the button (over the object area) itself.

I was not aware that an object could behave this way, could someone explain why this happens, if perhaps what I am doing is considered bad practice, and if there is any workaround?

Thanks.

Eth
  • 21
  • 1
  • Sorry I thought it might be better if i comment about things I have tried: a) inline HTML onclick code. b) Giving the object a CLASS or an ID and tying that to the jQuery code. c) Changing the jQyery syntax from $('.class).click(function() {}); to $('.class).on('click', function() {}); d) Trying to play with CSS z-index to place the div in front of the object. e) Trying to play with CSS user-event to kind of disable the object. Note: Both D and E would break the purpose of the button self-containing CSS i know, I was fiddling to see if I could find the source of the problem. – Eth Jul 15 '15 at 03:19
  • possible duplicate of [How to add JavaScript onClick handler to an embedded html object?](http://stackoverflow.com/questions/3156303/how-to-add-javascript-onclick-handler-to-an-embedded-html-object) – Paul LeBeau Jul 15 '15 at 04:29
  • Paul LeBeau is right, thanks for pointing me in the right, at least partially right direction. The answer would go through develop the whole code inside the svg, such as in : . For a 1-single purpose button I guess is a good solution, but in the case of needing to use the same button for different links (such as a Buy Now! button of some sort) this solution is non viable without a deeper JS use. – Eth Jul 15 '15 at 06:59
  • Is there a way via JS (that I would add inside the SVG button code) for the click event to lead to the URL/anchor that is held in the parent element? That way I could still have a single SVG file and specify the target URL in the parent container inside the HTML. – Eth Jul 15 '15 at 07:06
  • I would recommend you abandon `` and consider using SVG spritesheets. There are various tutorials, for example https://css-tricks.com/svg-sprites-use-better-icon-fonts/ – Paul LeBeau Jul 15 '15 at 08:22

3 Answers3

0

Try utilizing svg element

$(".button").on("click", function(e) {
  alert("This button has been clicked.");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-->
<div class="button">
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="0.506945in" height="0.1125in" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 4494 997"
 xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
  <style type="text/css">
   <![CDATA[

#butBox {
    fill: #FF6600;
    stroke: #FF6600;
    stroke-width: 30;
    transition: all 0.4s;
}

#butTxt {
    fill: #ffffff;
transition: all 0.4s;
}

#butWrap:hover #butBox {
    fill: #ffffff;
    stroke: #FF6600;
    cursor: pointer;
}

#butWrap:hover #butTxt {
    fill: #FF6600;
    cursor: pointer;
}

   ]]>
  </style>
 </defs>
 <g id="butWrap">
   <rect id="butBox" x="31" y="31" width="4433" height="936"/>
   <g id="butTxt">
    <path class="fil1" d="M373 626l-18 0 0 -238 -82 0 0 -16 183 0 0 16 -83 0 0 238zm138 -111l0 111 -17 0 0 -254 60 0c32,0 55,5 70,17 15,12 23,29 23,53 0,17 -5,31 -14,43 -9,12 -22,20 -41,25l69 116 -21 0 -66 -111 -63 0zm0 -15l49 0c21,0 38,-5 50,-15 12,-9 18,-23 18,-42 0,-19 -6,-34 -18,-42 -11,-9 -30,-14 -57,-14l-42 0 0 113zm317 36l-103 0 -36 90 -20 0 103 -255 11 0 100 255 -20 0 -35 -90zm-97 -16l91 0 -35 -91c-3,-8 -6,-18 -10,-30 -3,11 -7,21 -10,30l-36 91zm382 -24c0,43 -12,75 -34,97 -22,22 -55,33 -99,33l-61 0 0 -254 69 0c41,0 72,10 93,31 21,22 32,53 32,93zm-20 1c0,-36 -9,-64 -28,-82 -18,-19 -45,-28 -81,-28l-47 0 0 223 42 0c76,0 114,-37 114,-113zm217 129l-139 0 0 -254 139 0 0 16 -121 0 0 96 114 0 0 17 -114 0 0 109 121 0 0 16zm364 -127c0,40 -10,72 -30,95 -20,24 -48,36 -84,36 -35,0 -63,-12 -83,-36 -20,-23 -30,-55 -30,-96 0,-40 10,-72 30,-95 21,-24 48,-35 84,-35 35,0 63,11 83,35 20,23 30,55 30,96zm-208 0c0,36 8,64 24,84 17,20 40,30 70,30 31,0 54,-10 71,-30 16,-19 24,-48 24,-84 0,-37 -8,-65 -24,-85 -17,-19 -40,-29 -70,-29 -31,0 -54,10 -70,29 -17,20 -25,48 -25,85zm452 127l-18 0 -151 -226 -1 0c1,27 2,47 2,61l0 165 -17 0 0 -254 17 0 151 225 1 0c-1,-21 -2,-41 -2,-59l0 -166 18 0 0 254z"/>
     <path class="fil1" d="M3464 372l0 16 -88 0 0 238 -18 0 0 -238 -128 0 0 238 -15 0 -179 -233 0 233 -16 0 -6 0 -12 -29 0 0 -32 -72 0 0 -8 -18 -10 -22 0 0 -43 -99 -105 240 -20 0 115 -254 22 0 99 217 0 -217 24 0 169 222 0 -222c84,0 167,0 251,0l0 0z"/>
     <path class="fil1" d="M2518 609c43,-3 62,-22 62,-58 0,-29 -17,-44 -52,-44l-52 0c-48,0 -71,-22 -71,-64 0,-41 25,-64 75,-70 14,-2 21,-1 34,-1 100,0 198,0 297,0l0 16 -87 0 0 238 -19 0 0 -238c-64,0 -127,0 -191,1 -11,0 -21,0 -33,1 -38,5 -57,22 -57,53 0,31 17,46 52,46l52 0c47,0 70,21 70,62 0,42 -32,74 -70,75l0 0 -156 0 -16 0 0 -17 0 -216 -179 233 -15 0c0,-85 0,-170 0,-254l17 0c0,74 0,148 0,222l170 -222 23 0 0 237 146 0 0 0z"/>
     <rect class="fil2" x="2094" y="372" width="16.8761" height="254.244"/>
     <path class="fil1" d="M3504 377l0 -10 0 -6 7 0 90 0c43,0 76,11 98,32 20,19 30,47 32,83 -21,-69 -52,-98 -133,-99 -25,0 -56,0 -94,0l0 0z"/>
     <path class="fil1" d="M3500 630l0 -143 30 0 0 121 64 0c34,0 59,-9 75,-27 17,-19 25,-47 25,-85 0,-33 -8,-58 -25,-74 -16,-16 -41,-24 -75,-24l-31 0 -33 0 -30 0 0 -13c37,0 68,0 93,0 80,2 112,30 133,99 1,4 1,8 1,12 0,47 -12,81 -34,105 -22,23 -55,35 -99,35l-88 0 -6 0 0 -6 0 0z"/>
     <path class="fil1" d="M4214 621l0 14c-56,2 -92,-29 -109,-70 -2,-4 -4,-8 -5,-13 -1,5 -3,9 -4,13 -17,41 -54,72 -110,70l0 -28c44,1 71,-22 84,-53 6,-13 9,-29 9,-44 1,-15 -2,-31 -7,-45 -12,-36 -41,-66 -86,-68l0 -14c49,3 87,30 108,96 7,20 9,41 15,62 18,53 51,84 105,80l0 0 0 0z"/>
     <path class="fil1" d="M4222 390c-45,2 -75,32 -87,69 -5,14 -7,30 -7,45 0,15 4,30 9,43 13,32 41,55 84,54l0 14c-54,3 -87,-27 -105,-80 -6,-21 -9,-42 -15,-63 -21,-65 -59,-93 -108,-96l-1 14 2 -28c58,3 96,41 111,88l2 5 2 -5c15,-47 53,-85 112,-88l1 28 0 0zm-113 160c-1,-1 -1,-2 -2,-4l0 0c1,2 1,3 2,4zm-116 79l0 -28 0 0 0 28zm4 -28c41,-1 68,-23 80,-54l1 0c1,-3 2,-6 3,-9 2,-6 3,-12 4,-18 0,-2 1,-4 1,-5 0,-4 0,-7 0,-11 0,-5 0,-11 0,-17 0,6 0,12 0,17 0,4 0,7 0,11 0,1 -1,3 -1,5 -1,6 -2,12 -4,18 -1,3 -2,6 -3,9l-1 0c-12,31 -39,53 -80,54zm88 -116c0,-1 0,-2 0,-3 0,1 0,2 0,3zm-11 -39c-2,-4 -4,-8 -6,-12 2,4 4,8 6,12zm-10 -17c0,-1 -1,-2 -1,-2 0,0 1,1 1,2z"/>
     <path class="fil1" d="M3765 591c0,40 29,46 56,45l126 -3 0 -10c-53,0 -98,0 -135,-1 -1,0 -1,-1 -2,-1 -32,-2 -45,-33 -45,-75l0 45z"/>
     <path class="fil1" d="M3951 613l0 -10 -125 -3c-12,0 -26,0 -26,-19l0 -72 134 -3 0 -22 -134 -3 0 -73c0,-9 0,-20 21,-20l130 -1 0 -21 -130 -5c-27,-1 -51,12 -51,47l0 129c0,42 13,73 45,75 0,0 1,0 2,0 37,2 82,2 134,1l0 0z"/>
   </g>
 </g>
</svg>
<div>
guest271314
  • 1
  • 15
  • 104
  • 177
  • Hi, thanks for your answer - One thing I should have mentioned is that I would prefer to keep the SVG code to be on an external file, I want to try to maintain the HTML code as clean as possible. – Eth Jul 15 '15 at 03:40
0

Have you tried z-index and position relative? Have you tried giving the button its own class and targeting it that way? Have you tried prevent default and making your own click function?

user5083720
  • 1
  • Welcome to Stack Overflow! These seem more like possible answers that you should add as a comment than definitive answers. – John Wiseman Jul 15 '15 at 03:39
  • Hi, thanks for your comment. I have tried .button-container-class { position: relative; width: 100%; padding-top: 0.25em; z-index: 60; } .button-container-class object { width: 90%; z-index: 50; } In an attempt to position the object behind the div and making it available to the click event but no success. – Eth Jul 15 '15 at 03:44
0

This css should help: 

object {
   pointer-events: none;
}
Barbara Wiacek
  • 1