Question

我正在尝试将作为对象插入的SVG文件的单击路径的ID存储为HTML文档，但我无法获取它，但仍然不理解问题。

我想最终得到一个可点击的地图，该地图分为多个区域，这些区域将显示某些数据（在div＃data中），具体取决于所单击的区域。可以从xml文件中检索数据。

也许有一种更简单的方法可以完成此任务。请，我可以帮忙吗？

谢谢

SVG代码：

<tr>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th>Grand Total:</th>
                                <th>{{$total}}</th>
                                <th>--</th>
                            </tr>

HTML代码：

<defs>...
    <style>
        ...
    </style>
</defs>
<title>title here</title>
<g id="group1">
    <path id="zone1" onClick="selected(this.id)"  d="M482.56,0l-2,7a26.85,26.85,0,0,1-.79,4.26,20.67,20.67,0,0,0-.21,3.7,16.67,16.67,0,0,1-3.38,7.38c-1,1.48-.89,3.27-2.54,4.18-.9.5-.89,2.27-1.74,3.23-2.6,2.91-4.88,3.6-8.68,3-2.41-.39-4,2...

JS代码：

<article id="map">
    <object id="svg" type="image/svg+xml" data="images/mapa.svg">Your browser does not support SVG</object>
    <div id="result">
        <h3>header</h3>
        <div id="data" class="data"></div>
    </div>
</article>

该脚本为什么不显示ID？

Answer 1

我尝试了您的逻辑，它对我有用。但是，一个区别是该代码段完全包含SVG DOM。我不知道Stackoverflow是否支持上传单独的文件以用作外部SVG。

在我的代码段中，我使用jQuery将点击事件附加到SVG路径。

$(".heart").click(function(){
  var color = $(this).attr("fill");
  console.log(color,"clicked");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<h1>Click a heart!</h1>
<svg width="200" height="100" style="background-color: #bada55" >
  <g transform="scale(1.2)">
    <path class="heart" d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" fill="red"></path>
  </g>
  
  <g transform="scale(0.8) translate(140,40)">
    <path class="heart" d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" fill="black"></path>
  </g>
</svg>

嵌入式SVG路径onclick获取ID

1 个答案: