SVG要素のXPathを検索

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を使って要素を見つけるのに役立ちます。

私は4つのウィンドウを持っていますが、クリックすると次のイメージに行きますが、その前にクリックすると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/