【发布时间】：2020-12-10 08:25:45
【问题描述】：
我试图让 svg 路径在放入文件时“可点击”，而不是在文档中嵌入。
基本上我只想能够点击图像的填充元素，而不是任何空白区域。 我已将我的 PNG 图像转换为 svg 并使其正常工作，因此当我单击填充区域时，代码会根据需要执行，但在单击任何空白区域时则不会。
为此，我只需在“路径”标签中添加一个“类”，即可通过代码使填充区域交互。
但是，如果我现在将此 svg 代码放入一个文件中并将其加载到一个元素中，这似乎是我所读到的方法，那么它将无法正常工作。
我已经在下面的文件中添加了 jquery add，虽然这些允许其他 svg 函数工作，但它不允许这个。
<link rel="stylesheet" type="text/css" href="assets/js/jquery.svg.css">
即使使用一些简单的 css，我也无法与文件中的内部 svg 路径进行交互。如果我将 css 直接放入文件中的“样式”标签中，则应用 css。
我不知道该去哪里。我有几千张图片需要这个功能，每张图片都有很多编码来创建 svg 图片的路径，所以我真的不想把所有这些都放到 html 文档中，因为这将是一个应对噩梦。
我已经看到人们实现了类似的交互，但我还没有找到一个应用 jquery 或 java 甚至能够改变 css 工作能力的解决方案。
这是 svg 的代码，它只是使用测试图像而不是我自己的图像，但工作方式相同。
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0
300.000000 300.000000" preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,300.000000) scale(0.050000,-0.050000)" fill="#00000" stroke="none">
<!-- The <a> tag we've added -->
<path class="imageSelector" style="cursor: pointer;" d="M4390 5952 c-113 -53 -289 -221 -427
-409 -84 -114 -98 -125 -153
-117 -171 27 -523 -80 -714 -217 l-98 -71 -97 71 c-186 137 -427 215 -661 215
l-115 0 -91 123 c-228 310 -551 543 -524 378 5 -30 19 -167 31 -305 12 -137
30 -281 40 -318 17 -66 13 -74 -119 -213 -336 -354 -415 -830 -210 -1265 l50
-106 -38 -104 c-235 -632 -120 -1587 226 -1874 64 -53 11 -59 -607 -64 l-636
-6 -79 -55 c-242 -167 -208 -515 61 -637 75 -34 153 -37 1058 -38 l977 0 -13
-75 c-25 -132 -109 -254 -295 -425 -213 -197 -351 -454 -221 -414 553 173 689
197 799 139 298 -158 287 -155 466 -155 179 0 168 -3 466 155 110 58 246 34
799 -139 130 -40 -8 217 -221 414 -186 171 -270 293 -295 425 l-13 75 977 0
c905 1 983 4 1058 38 269 122 303 470 61 637 l-79 55 -636 6 c-618 5 -671 11
-607 64 346 287 461 1244 225 1877 l-39 107 51 103 c208 416 127 909 -208
1262 -135 141 -136 144 -120 222 10 43 27 178 39 299 13 121 27 258 32 305 5
47 7 85 5 85 -3 0 -50 -22 -105 -48z m-1960 -899 c250 -67 549 -348 550 -518
0 -19 9 -35 20 -35 11 0 20 16 20 35 1 170 300 451 550 518 734 196 1249 -740
706 -1280 -233 -231 -581 -286 -874 -138 -71 36 -130 63 -132 60 -2 -3 -61
-115 -132 -250 -70 -135 -132 -245 -138 -245 -6 0 -68 110 -138 245 -71 135
-130 247 -132 250 -2 3 -61 -24 -132 -60 -297 -151 -682 -79 -905 167 -500
553 23 1441 737 1251z m-55 -3239 c25 -23 45 -55 45 -72 0 -19 25 -1 61 43 78
95 190 105 270 26 47 -47 49 -60 49 -311 0 -251 -2 -264 -49 -311 -80 -79
-192 -69 -270 26 -40 49 -61 63 -61 41 0 -104 -198 -150 -294 -68 l-56 49 0
260 c0 246 3 262 47 310 75 79 175 82 258 7z m1146 -31 c36 -44 59 -60 59 -41
0 114 205 162 298 70 51 -52 52 -59 52 -314 l0 -261 -56 -49 c-93 -80 -294
-37 -294 63 0 16 -9 29 -20 29 -11 0 -20 -11 -20 -24 0 -108 -203 -155 -291
-67 -54 55 -75 504 -27 594 57 108 210 108 299 0z" />
<path d="M2090 4647 c-352 -186 -235 -697 160 -697 391 0 514 514 166 692 -91
46 -243 48 -326 5z" />
<path d="M3590 4647 c-352 -186 -235 -697 160 -697 391 0 514 514 166 692 -91
46 -243 48 -326 5z" />
</g>
</svg>
如果我把它放到文档中，它就可以正常工作。如果我从文件加载它，图像会呈现，但我无法与路径的类交互
这是飞行加载选项的代码：
<object class="imageClass" type="image/svg+xml" data="ImageFile.svg"></object>
感谢您对此的任何帮助 更新： 我已经尝试了几种方法来让它工作，查看在线选项和以下建议的帮助，但我没有成功让 svg 在从文件加载时完全可点击。
我什至能够访问 svg 文件的内部元素的唯一方法是对 jquery.svg 使用以下方法：
(document).ready(function() {
$("#divforSVG").svg(
{
onLoad: function() { var svg = $("#divforSVG").svg('get');
svg.load('svgFile.svg', {addTo: true, changeSize: false});
},
settings: {}} );
$('#Button').click(function(e) {
var rect = $('#ImagePath');
rect.css('fill','green');
rect.attrib('fill','green');
});
});
这是我从以下链接中找到的： Modify a svg file using jQuery
这会将 svg 文件加载到一个元素中，而不是按照建议的方式将 svg 文件放置在 html 页面中的对象元素中。这有效，通过单击按钮更改颜色，并且可以将其应用于 svg 文件的任何内部部分。但是，我找不到将点击事件绑定到 svg 文件的内部元素的方法。
使用对象方法访问 svg 文件内部元素的主要方法，如此链接中所述，我根本无法访问 svg 元素的任何部分。
How to access SVG elements with Javascript
这似乎是使用普通 javascript 的方法，但我没有取得任何进展。如果有人对我如何使用上面列出的 jquery.svg 方法绑定点击事件或如何使对象元素方法工作有任何建议，我将不胜感激
【问题讨论】：
标签： svg jquery-svg