我正在尝试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遍历树层次结构的推荐方法是什么?
答案 0 :(得分:1)
使用forEach()的selectAll()将是我的正常方式......你也可以将它们组合起来,
So Snap('#FC1')或Snap('g')选择第一个g元素 或者你可以使用paper.select('#FC1'),如果你已经有一个svg / group元素。然后,您可以在该元素上使用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 )
}
或者如果您愿意,您可以直接访问DOM,例如
el.node.children
并引用它们,当你循环遍历它们时,你可以“Snapify”它们再次使用Snap(DOMelement)。