Question

我制作了一些自定义SVG按钮，这些按钮自包含CSS代码以进行美学更改：悬停，如代码段示例所示。

＆＃13;

<?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>

＆＃13;

它们完美无瑕地工作，当我将它们添加到我的网站并悬停时，美学转换成功触发，但当我尝试绑定点击事件时，它只是赢了工作。这是我使用的HTML：

＆＃13;

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

＆＃13;

我怀疑这与我编写HTML方面的方式有关，在div中嵌入一个对象（而不是通常的img标记）。我尝试了不同的东西，比如内联HTML onclick和jQuery触发器，而我必须让它工作起来很简单：

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

但不知何故看起来这个对象使div黯然失色，因为如果我点击按钮的两侧（仍然在div区域内）它会触发alert（），但是如果我点击按钮（在对象区域本身。

我不知道一个物体可以这样做，有人可以解释为什么会发生这种情况，如果我正在做的事情被认为是不好的做法，如果有任何解决办法？

感谢。

Answer 1

尝试使用<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <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>元素

＆＃13;

base64

＆＃13;

socket.on('send_picture', function (data){
    socket_data = (socket_data + data);
    document.getElementById('imgid').src = socket_data
})

＆＃13;

Answer 2

你试过z-index和位置相对吗？您是否尝试过将按钮设为自己的类并以此方式定位？您是否尝试过防止默认并制作自己的点击功能？

Answer 3

这个CSS应该有所帮助：

object {
   pointer-events: none;
}

包含<object>的DIV上的jQuery click事件

3 个答案: