javascript - 如何访问 SVG 文档中的 <path>

标签 javascript jquery path svg tags

我正在创建几张可点击的 map - 但未能成功找到如何访问路径的标签,以便我可以使 map 中的所有不同县都可点击。 (SVG 文件非常复杂......这是结构,我无法更改它 - 它会针对所有不同状态自动生成):

<svg width="932.25827pt" height="569.25354pt" viewBox="0 0 932.25827 569.25354" enable-background="new 0 0 932.25827 569.25354"
version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
<g id="Layers">
    <g id="Ohio_Counties">
        <clipPath id="SVG_CP_1">
            <path d="M0,569.25354L0,0L932.25827,0L932.25827,569.25354L0,569.25354z"/>
        </clipPath>
        <path clip-path="url(#SVG_CP_1)" fill="none" stroke="#4E4E4E" stroke-width="0.48003" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" d="
    M374.18483,441.14215L375.38491,440.90214L375.62493,440.90214L376.58499,440.66213L376.82501,440.66213L377.54505,440.42212
            L378.02508,440.42212L378.2651,440.42212L378.74513,440.42212L379.46518,440.66213L381.14529,440.66213L381.38531,440.66213L
            381.62532,440.66213L382.10536,440.66213L382.8254,440.66213L384.50551,440.90214L384.74553,440.90214L386.18563,440.90214L386.42564,441.38217
            L386.42564,441.62218L386.42564,441.86219L386.66566,441.86219L386.90567,441.86219L386.90567,442.1022L386.90567,442.34221L"/>
       </path>   
    </g>
</g>

/* There are about 87 more paths in the file... this is just a part of one.*/

我正在使用 jquery.svg - 但尚未在文档中找到解决方案。

这是javascript:

function changeState(newState){
    nS = newState.replace(/\s/g, '');

    try {      
        var map = 'mapLayers/AEP'+nS+'Counties.svg';
            $("#contentCounties").empty();
            var currentCountyMap = $('#contentCounties').svg({loadURL: loc, onLoad: addClickEvents(this)});

        } catch(err){
           alert("the map " + currentCountyMap + " does not exist");
    }
}


function addClickEvents(){
    // this is where I want to put the code to 
    // add click events to the individual paths.
    // Whether it's running a loop or using a jquery selector
    // I'm fine with either.

    // This is, in theory, what I think I want - but alas, it is wrong:
    var svg=document.getElementByTagName("path");
    alert(svg);
}

最佳答案

看起来你刚刚从 getElementsByTagName 中去掉了 s

关于javascript - 如何访问 SVG 文档中的 <path>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13036294/

相关文章:

javascript - URIencode 和冒号

javascript - 插入 Ajax 轮询

javascript - d3 雷达图——radialLine 创建路径但没有坐标

javascript - 如何在 Select2 中的 closeOnSelect 为 false 时设置 maximumSelectionLength?

php - 正则表达式:比较两个字符串以查找头韵和谐音

javascript - 如何调用IE11特定的css

regex - UNIX文件路径最正确的正则表达式是什么?

javascript - 如何在手机上调整html页面的大小

javascript - 如何使 AJAX 正常运行 (event, ui)?

android - 如何将 android 工具添加到我在 mac 上的路径?