如何使用 SnapSVG 将 SVG 作为树结构遍历？

Question

我正在尝试 SnapSVG，使用它可以轻松执行一些常见任务。但是，我似乎无法弄清楚如何将 SVG 文件作为树结构进行遍历。根据我在文档 select() 和 selectAll() 中收集到的内容，其中 select 单个元素或折叠组。

我正在使用一组看起来像这样的组：

<g id="FC1">
    <g id="S2B" class="st0">
        <path class="st1" d="M779.838,895.4v43.897h-70.5V895.4H779.838z M709.339,895.4"></path>
        <path class="st1" d="M922.14,895.4h70.5v43.897h-70.5V895.4z M922.14,939.297"></path>
        <path class="st1" d="M567.471,939.297V895.4h70.5v43.897H567.471z M637.97,939.297"></path>
        <path class="st1" d="M993.074,895.4h70.5v43.897h-70.5V895.4z M993.074,939.297"></path>
        <path class="st1" d="M921.706,895.4v43.897h-70.5V895.4H921.706z M851.206,895.4"></path>
        <path class="st1" d="M638.405,895.4h70.5v43.897h-70.5V895.4z M638.405,939.297"></path>
        <path class="st1" d="M1064.008,895.4h70.5v43.897h-70.5V895.4z M1064.008,939.297"></path>
        <path class="st1" d="M780.272,939.297V895.4h70.5v43.897H780.272z M850.772,939.297"></path>
    </g>
    <g id="S2A" class="st0">
        <path class="st1" d="M1418.243,939.297h-70.5V895.4h70.5V939.297z M1418.243,895.4"></path>
        <path class="st1" d="M1489.611,895.4h70.5v43.897h-70.5V895.4z M1489.611,939.297"></path>
        <path class="st1" d="M1418.677,939.297V895.4h70.5v43.897H1418.677z M1489.177,939.297"></path>
        <path class="st1" d="M1205.441,939.297h-70.5V895.4h70.5V939.297z M1205.441,895.4"></path>
        <path class="st1" d="M1560.545,895.4h70.5v43.897h-70.5V895.4z M1560.545,939.297"></path>
        <path class="st1" d="M1347.309,895.4v43.897h-70.5V895.4H1347.309z M1276.809,895.4"></path>
        <path class="st1" d="M1772.912,895.4v43.897h-70.5V895.4H1772.912z M1702.413,895.4"></path>
        <path class="st1" d="M1773.346,895.4h70.5v43.897h-70.5V895.4z M1773.346,939.297"></path>
        <path class="st1" d="M1914.78,939.297h-70.5V895.4h70.5V939.297z M1914.78,895.4"></path>
        <path class="st1" d="M1701.978,939.297h-70.5V895.4h70.5V939.297z M1701.978,895.4"></path>
        <path class="st1" d="M1276.375,939.297h-70.5V895.4h70.5V939.297z M1276.375,895.4"></path>
    </g>
    <g id="S2C" class="st0">
        <path class="st1" d="M283.735,939.297V895.4h70.5v43.897H283.735z M354.235,939.297"></path>
        <path class="st1" d="M496.537,939.297V895.4h70.5v43.897H496.537z M567.037,939.297"></path>
        <path class="st1" d="M425.169,939.297h-70.5V895.4h70.5V939.297z M425.169,895.4"></path>
        <path class="st1" d="M496.103,939.297h-70.499V895.4h70.499V939.297z M496.103,895.4"></path>
    </g>
</g>

如果我这样做 select("g) 此层次结构将折叠。

我可以使用纯 JS 和 document.querySelector() 来访问元素，但我希望使用 SnapSVG 的一些功能。

使用 SnapSVG 遍历树层次结构的推荐方法是什么？

Answer 1

selectAll() 和 forEach() 是我的常规方式...您也可以将它们组合起来，

So Snap('#FC1') 或 Snap('g') selects 第一个 g 元素或者，如果您已有 svg/group 元素，则可以使用 paper.select('#FC1')。然后，您可以在该元素上使用 select/selectAll（只要它是像 g/svg 这样的容器元素）。

您可以组合，例如...

paper.select('g').selectAll('g').forEach( doSomethingFunc )

这将 select 第一个 g 元素，然后 select 第一个 g 元素内的所有 g 元素。

当你使用 Snap( selector ) 或 selectAll 类型的东西时，在幕后使用 css querySelectorAll，所以你可以认为它们相似。

例如，如果您有多个嵌套的 'g'，您可以使用 css selector 来指定第一个级别，对其进行解析并对其执行操作。 ..例如

var gs3 = s.selectAll('svg>g').forEach ( selectNext )

function selectNext( el ) {
  var els = el.selectAll('g>g'); // do children
  console.log( els )
}

jsfiddle

或者，如果你愿意，你可以直接访问 DOM，像

el.node.children

并引用它们，您可以随时 'Snapify' 在循环遍历它们时使用 Snap(DOMelement) 再次使用 Snap。

如何使用 SnapSVG 将 SVG 作为树结构遍历？

How to traverse an SVG as a tree structure with SnapSVG?

javascript

svg

snap.svg