jquery与svg路径交互以创建特定的可点击区域 [英] jquery interaction with svg path to create specific clickable area
问题描述
我试图让 svg 路径在放入文件时可点击"，而不是放入文档中.
基本上我只想能够点击图像的填充元素，而不是任何空白区域.我已将 PNG 图像转换为 svg 并使其正常工作，因此当我单击填充区域时，代码会根据需要执行，但在单击任何空白区域时不会执行.
为此，我只需在路径"标签中添加一个类"，即可通过代码使填充区域具有交互性.
但是，如果我现在将这个 svg 代码放入一个文件中并将其加载到一个元素中，这似乎是我阅读的方法，那么它将无法工作.
我已经在下面的文件中添加了 jquery add，虽然这些允许其他 svg 函数工作，但不允许这个.
即使使用一些简单的 css，我也无法与文件中的内部 svg 路径交互.如果我将 css 直接放入文件的样式"标签中，则应用 css.
我不知道该去哪里.我有几千张图片需要有这个功能，每个图片都有很多编码来创建 svg 图像的路径，所以我真的不想把所有这些都放到 html 文档中，因为它会是一个噩梦要处理.
我已经看到人们实现了类似的交互，但我还没有找到应用 jquery 或 java 的人，甚至还没有找到能够改变 css 工作能力的解决方案.
这是 svg 的代码，它只是使用测试图像而不是我自己的图像，但工作原理相同.
如果我把它放到文档中，它工作正常.如果我从文件加载它，图像会呈现，但我无法与路径的类进行交互
这是苍蝇加载选项的代码:
感谢您对此的任何帮助更新:我已经尝试了几种方法来让它工作，查看在线选项和下面建议的帮助，但我没有成功地让 svg 在从文件加载时可点击.
我什至能够访问 svg 文件的内部元素的唯一方法是在 jquery.svg 中使用以下方法:
(document).ready(function() {$("#divforSVG").svg({onLoad: function() { var svg = $("#divforSVG").svg('get');svg.load('svgFile.svg', {addTo: true, changeSize: false});},设置:{}} );$('#Button').click(function(e) {var rect = $('#ImagePath');rect.css('填充','绿色');rect.attrib('填充','绿色');});});这是我从以下链接中找到的:.
请仔细注意 jQuery 在其中扮演的角色.jQuery 已加载到父文档中，并且不存在于子文档中.因此，不是使用 $('svg') 选择子文档中的 SVG 根元素，而是必须使用 $(childDocument).find('svg').您不能使用 .parent()、.children() 或其他遍历函数从一个文档遍历到另一个文档.您不能将子文档中的事件委托给父文档中的元素.
jquery-svg 插件必须使用
var svg = $(childDocument).find('svg').svg('get')I am trying to get an svg path to be 'clickable' when put into an file rather than put in-line in the document.
Basically I just want to be able to click on the filled elements of an image, not any empty areas. I have converted my PNG image to svg and got this working, so that when I click on the filled areas the code executes as I need to, but not when clicking on any empty areas.
To do this, I have only had to put in a 'class' to the 'path' tag to make the filled areas interactive via the code.
However, if I now put this svg code into a file and load it into an element, as seems to be the way to do it from what I've read, then it won't working.
I have already added the jquery add on files below, and while these have allowed other svg functions to work it hasn't allowed for this one.
<link rel="stylesheet" type="text/css" href="assets/js/jquery.svg.css">
I am unable to interact with the internal svg path within the file even with some simple css. if I put the css into the file directly in a 'style' tag then the css is applied.
I am not sure where to go with this. I have several thousand images that need to have this functionality and each one has a lot of coding to create the path for the svg image so I really don't want to have to put all of these into the html document as it will be a nightmare to deal with.
I've seen people acheieving similar interactions but as yet I've not found one applying jquery or java or even a solution that will get the ability to vary css working.
here is the code for the svg, which is just using a test image rather than one of my own but works the same.
<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>
If I put this into the document, it works fine. If I load it from a file, the image renders but I can't interact with the class for the path
this is the code for the flie load option:
<object class="imageClass" type="image/svg+xml" data="ImageFile.svg"></object>
thanks for any help on this Update: I have tried several ways to get this to work looking at options online and the help from suggestions below but I haven't had any success in getting the svg to be clickable at all when loaded from a file.
The only way I have been able to even access the inner elements of the svg file is using the following method with 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');
});
});
This i found from the following link: Modify a svg file using jQuery
This loads the svg file into an element, rather than placing the svg file within an object element in the html page, as seems to be the way suggested. This works, changing the colour by clicking on the button, and can apply this to any inner part of the svg file. However, I cannot find a way to bind a click event to the inner elements of the svg file.
The main method of accessing inner elements of the svg file using the object method, as set out in this link, I can't get to work at all to access any part of the svg element.
How to access SVG elements with Javascript
this seems to be the way to do it with normal javascript but I've not made any progress with it. If anyone has any suggestions on how I may be able to bind a click event using the jquery.svg method as set out above, or how to get the object element method working, I'd greatly appreciate it
If you reference a file in another file, that file is no longer part of the document object model, and Javascript can no longer interact with it. The file has its own, separate DOM.
You were right to use an <object> tag, because that gives you the possibility to bridge the gap between the two DOMs (something that would be impossible with an <img> tag). Basically, with
var childDocument = $('object.imageClass').prop('contentDocument')
you get access to the document interface of the SVG content - but only provided the linked file fullfills the same-origin policy.
Note carefully the role that jQuery plays in this. jQuery has been loaded into the parent document and is not present in the child document. So instead of selecting the SVG root element in the child document with $('svg'), you must use $(childDocument).find('svg'). You cannot traverse from one document to the other with .parent(), .children() or other traversal functions. You cannot delegate events from the child document to elements in the parent document.
The jquery-svg plugin would have to work with
var svg = $(childDocument).find('svg').svg('get')
这篇关于jquery与svg路径交互以创建特定的可点击区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
