Question

我有一个page，我试图从svg文档中提取图层名称并制作一个控制其可见性的滑动菜单。

我的页面如下：

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>665 Riddle Creek</title>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script type="text/javascript" src="jquery"></script>
    <link rel="stylesheet" type="text/css" href="css" />
  </head>
  <body>
    <nav/>
    <object id="map" type="image/svg+xml" data="svg"></object>
  </body>
</html>

我想从svg中提取图层并在nav中创建一个列表。我很难从svg中选择图层。我尝试过以下方法：

$('[inkscape\\:groupmode="layer"]', $('#map').first().contextDocument)
$($('#map').first().contextDocument).find( '[inkscape\\:groupmode="layer"]' )
$('#map').contents().find( '[inkscape\\:groupmode="layer"]' )

所有方法都返回0个元素。我该怎么办？

我为这个问题创建了一个jsFiddle，我的问题似乎源于contentDocument被设置为一个空的html文档，而不是我的svg。

Answer 1

显然，在调用jQuery.ready处理程序时，不一定会加载svg文档。我能够使用以下代码访问该文档：

$( function() {
    var svgElem = document.getElementById("map")
    svgElem.addEventListener('load', function() {
        var svg = this.contentDocument
        $('nav').append( layersList( $(svg.documentElement) ) )
    }, false)
} )

构建列表的函数如下：

function layersList( $root ) {
    var $children = $root.children( '[inkscape\\:groupmode="layer"]' )
    var $list = $('<ul/>')
    $children.each( function() {
        ⋮
    } )
    return $list
}

使用jQuery选择包含的文档元素

1 个答案: