Question

    <div id="windowsContainer"></div>
    <div style="display: inline-block; position: relative; width: 100%; padding-    bottom: 54.5833333%; vertical-align: middle
    <object data="/Images/windows.svg" type="image/svg+xml" id="svg-windows" onload="windowsLoaded()" style="display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></object>
#document ==$0
xml-stylesheet
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" id="svg-windows" version="1.1" baseProfile="full" x="0" y="0" viewBox="0 0 1200 655" preserveAspectRatio="xMinYMin meet" style="display: block; position: absolute; top: 0; left: 0;">
  <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="600" y1="645" x2="600" y2="10">
    <stop offset="0" style="stop-color:#B1B1BC"/>
    <stop offset="0.3" style="stop-color:#D0D2D9"/>
    <stop offset="0.7" style="stop-color:#CFCFD6"/>
    <stop offset="1" style="stop-color:#B1B1BC"/>
    </linearGradient>
    <path fill="url(#SVGID_1_)" d="M1190,317.9h-0.4c-0.6-21.2-1.9-56.7-4.4-83.4c-3.9-40.7-14.5-100.7-25.2-119.1 c-10.6-18.4-18.4-23.2-36.8-31c-18.4-7.7-45.5-19.4-53.2-23.2c-7.8-3.9-33.9-16.5-33.9-16.5H848.4c-5.8,5.8-18.7,7.8-29.4,8.4 c0-5.2-0.4-11.4-0.8-16.1c-0.8-7.9-7.2-22.2-10.3-24.9c-3.1-2.6-14.1-2-14.1-2v43c-59.9,0-407,0-437,0c-32.9,0-43.5-7.6-43.5-7.6 s-146.8-14.9-192.6,0c-9,2.9-21.3,15.5-30,23.3C82,76.7,10,177.8,10,327c0,149.2,72,250.3,80.7,258.1c8.7,7.8 21,20.3,30,23.3 c45.8,14.9,192.6,0,192.6,0s10.6-7.6,43.5-7.6c30.1,0,377.1,0,437,0v44.3c0,0,11,0.7,14.1-2c3.1-2.6,9.5-17,10.3-24.9 c0.5-5.1,1-12,0.8-17.4c10.7,0.6,23.6,2.6,29.4,8.4h187.7c0,0,26.1-12.6,33.9-16.4c7.7-3.9,34.8-15.5,53.2-23.2 c18.4-7.7,26.1-12.6,36.8-31c10.6-18.4,21.3-78.4,25.2-119.1c2.5-26.7,3.8-62.2,4.4-83.4h0.4c0,0-0.1-3.4-0.2 9.1 C1189.9,321.3,1190,317.9,1190,317.9z"/>
    <path class="clickable window" data-toggle="tooltip" title="Windscreen" id="1" d="M994.2,327.7c0-2.7,0-5.4,0-8.2c0-3-0.1-5.9-0.4-8.7c-3.1-94.8-22.8-160-30.5-180.6 c-2.9-7.8-8.3-4.7-8.3-4.7l-226.8,97.8c0,0-3.9,1.5-3,5.7c1.4,6.9,8.1,35.3,8.6,98.7c-0.4,63.5-7.2,91.8-8.6,98.7 c-0.8,4.2,3,5.6,3,5.6l226.8,97.8c0,0,5.3,3.1,8.3-4.7c7.7-20.6,27.4-85.9,30.5-180.6c0.3-2.8,0.4-5.7,0.4-8.7 C994.3,333.1,994.3,330.4,994.2,327.7z"/>
    <path class="clickable window" data-toggle="tooltip" title="Rear" id="3" d="M210.5,226.3c0,0,1.1-6.3-2.9-8.5c0,0-81.2-72.6-81.5-72.8c-4.3-2.4-7.1,2.4-7.1,2.4 s-52.6,67.5-2.6,180.9c0,113.4,52.6,179.7,52.6,179.7s2.9,4.9,7.1,2.4c0.4-0.2,81.5-82.3,81.5-82.3c4-2.2,2.9-8.5,2.9-8.5 s-9.7-43.9-9.7-99.7C200.9,264,210.5,226.3,210.5,226.3z"/>
   <path class="clickable window" data-toggle="tooltip" title="Sunroof" id="4" d="M662.7,255.2c-0.5-14.5-12.3-26.4-27.6-26.4l-96.3,0c-15.3,0-27.6,11.8-27.6,26.4v145 c0,14.5,12.3,26.4,27.6,26.4h96.3c15.3,0,27.1-11.8,27.6-26.4c0,0,5-33,5-71.6C667.8,289.9,662.7,255.2,662.7,255.2z"/>
  <path class="clickable window" data-toggle="tooltip" title="Side" id="2" d="M292.3,75.4c0,0-31.4,3.1-43.6,5.8c-14.7,3.3-86.8,18.7-87.1,41.3 c-0.1,8.3,41.5,46.9,47.1,52.2c21.1,19.9,50.1,22.5,98.8,24.2L292.3,75.4z"/>
    <path class="clickable window" data-toggle="tooltip" title="Side" id="2" d="M935,94.1c-27.9-6-56.4-10.7-69.4-12.8c-12.4-2-39.6-5.5-56.9-6.5l-19.2,91.1l148.9-64.5 C944.1,96.6,935,94.1,935,94.1z"/>
  <path class="clickable window" data-toggle="tooltip" title="Side" id="2" d="M292.3,579.8c0,0-31.4-3.1-43.6-5.8c-14.7-3.3-86.8-18.7-87.1-41.3 c-0.1-8.3,41.5-46.9,47.1-52.2c21.1-19.9,50.1-22.5,98.8-24.2L292.3,579.8z"/>
    <path class="clickable window" data-toggle="tooltip" title="Side" id="2" d="M935,561c-27.9,6-56.4,10.7-69.4,12.8c-12.4,2-39.6,5.5-56.9,6.5l-19.2-91.1l148.9,64.5 C944.1,558.6,935,561,935,561z"/>
    <path class="clickable window" data-toggle="tooltip" title="Side" id="2" d="M322.2,457l-15.4,124.6c5.1,0.6,66.3,0.9,66.3,0.9h149.7V456.7L322.2,457z"/>
    <path class="clickable window" data-toggle="tooltip" title="Side" id="2" d="M373.1,72.6c0,0-61.2,0.3-66.3,0.9l15.4,124.6l200.6,0.4V72.6H373.1z"/>
    <path class="clickable window" data-toggle="tooltip" title="Side" id="2" d="M772.3,481.8l-53.4-23.1l-8.3-2.3l-159.4,0.1v126h209.1c0,0,14.6-0.5,32.8-1.4L772.3,481.8z"/>
    <path class="clickable window" data-toggle="tooltip" title="Side" id="2" d="M760.3,72.6H551.2v126l159.4,0.1l8.3-2.3l53.4-23.1L793.2,74 C774.9,73.1,760.3,72.6,760.3,72.6z"/>
    </svg>
    </object>
    </div>

这是我的问题中的代码，我希望社区帮助找到XPath或使用CSS查找元素。

问题是我有四个窗口，当我点击它时会转到下一个图像，但是，在此之前，当我点击时我需要找到XPath来找到该元素。

Answer 1

修复语法错误后，您可以使用JavaScript访问所点击的<path>。

var paths        = document.querySelectorAll("svg path"),
    len          = paths.length,
    clickHandler = function(event) {
      console.log(event.target.getAttribute("title"));
      // prints things like "Sunroof", "Side", "Windscreen", etc.
    };

for (var i = 0; i < len; i++) {
  paths[i].addEventListener('click', clickHandler);
}

我建议您删除代码中的重复ID。这是一个功能演示，可以帮助您入门。打开开发人员工具控制台以查看记录的title属性值。

DEMO ：https://jsfiddle.net/c2vczkts/

查找SVG元素的XPath

1 个答案: