如何使用SnapSVG將SVG作為樹結構遍歷？

Question

我正在嘗試SnapSVG ，一些常見的任務很容易執行。 但是，我似乎無法弄清楚如何以樹結構形式遍歷SVG文件。 從我可以收集的文檔中， select()和selectAll()可以選擇單個元素或折疊組。

我正在使用一群看起來像這樣的群組：

<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（）會是我的正常方式...您也可以將它們組合在一起，

所以Snap（'＃FC1'）或Snap（'g'）選擇第一個g元素，或者如果您已經有一個svg / group元素，則可以使用paper.select（'＃FC1'）。 然后，您可以在該元素上使用select / selectAll（只要它是諸如g / svg之類的容器元素）即可。

您可以合並，例如...

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

這將選擇第一個g元素，然后選擇第一個g元素內的所有g元素。

當您使用Snap（選擇器）或selectAll類型的東西時，在后台使用css querySelectorAll，因此您可以想到它們類似的東西。

例如，如果您有多個嵌套的“ g”，則可以使用css選擇器來指定第一級，解析該第一級，然后對其進行操作...例如

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。