javascript - 通过 JS 操作 SVG

Question

我有一个类似于下面的 SVG 标签

<svg width="696" height="582" style="overflow: hidden;" aria-label="A chart."><defs id="_ABSTRACT_RENDERER_ID_4"><clipPath id="_ABSTRACT_RENDERER_ID_5"><rect x="70" y="111" width="557" height="360"></rect></clipPath></defs><rect x="0" y="0" width="696" height="582" stroke="none" stroke-width="0" fill="#ffffff"></rect><g><rect x="70" y="111" width="557" height="360" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect><g clip-path="url(...#_ABSTRACT_RENDERER_ID_5)"><g><rect x="70" y="470" width="557" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="70" y="398" width="557" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="70" y="326" width="557" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="70" y="255" width="557" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="70" y="183" width="557" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="70" y="111" width="557" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="70" y="434" width="557" height="1" stroke="none" stroke-width="0" fill="#ebebeb"></rect><rect x="70" y="362" width="557" height="1" stroke="none" stroke-width="0" fill="#ebebeb"></rect><rect x="70" y="291" width="557" height="1" stroke="none" stroke-width="0" fill="#ebebeb"></rect><rect x="70" y="219" width="557" height="1" stroke="none" stroke-width="0" fill="#ebebeb"></rect><rect x="70" y="147" width="557" height="1" stroke="none" stroke-width="0" fill="#ebebeb"></rect></g><g><rect x="70" y="470" width="557" height="1" stroke="none" stroke-width="0" fill="#333333"></rect></g></g><g></g><g><g><text text-anchor="end" x="56" y="475.4" font-family="Arial" font-size="14" stroke="none" stroke-width="0" fill="#444444">0.0</text></g><g><text text-anchor="end" x="56" y="403.59999999999997" font-family="Arial" font-size="14" stroke="none" stroke-width="0" fill="#444444">0.2</text></g><g><text text-anchor="end" x="56" y="331.79999999999995" font-family="Arial" font-size="14" stroke="none" stroke-width="0" fill="#444444">0.4</text></g><g><text text-anchor="end" x="56" y="260" font-family="Arial" font-size="14" stroke="none" stroke-width="0" fill="#444444">0.6</text></g><g><text text-anchor="end" x="56" y="188.20000000000002" font-family="Arial" font-size="14" stroke="none" stroke-width="0" fill="#444444">0.8</text></g><g><text text-anchor="end" x="56" y="116.4" font-family="Arial" font-size="14" stroke="none" stroke-width="0" fill="#444444">1.0</text></g></g></g><g></g></svg>

​</p>

有没有办法通过JS删除<g clip-path="url(...#_ABSTRACT_RENDERER_ID_5)">？

标签： javascriptsvg

Answer 1

当您可以选择它时，您应该能够将其删除。你试过了吗

let svg_gTag = document.querySelector('svg g[clip-path="url(...#_ABSTRACT_RENDERER_ID_5)"]');
svg_gTag.parentNode.removeChild(svg_gTag);

我试着写下：

let svg_gTag = document.querySelector('svg#demo g[clip-path="url(...#_ABSTRACT_RENDERER_ID_5)"]');
svg_gTag.parentNode.removeChild(svg_gTag);

<svg id="demo" width="696" height="582" style="overflow: hidden;" aria-label="A chart."><defs id="_ABSTRACT_RENDERER_ID_4"><clipPath id="_ABSTRACT_RENDERER_ID_5"><rect x="70" y="111" width="557" height="360"></rect></clipPath></defs><rect x="0" y="0" width="696" height="582" stroke="none" stroke-width="0" fill="#ffffff"></rect><g><rect x="70" y="111" width="557" height="360" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect><g clip-path="url(...#_ABSTRACT_RENDERER_ID_5)"><g><rect x="70" y="470" width="557" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="70" y="398" width="557" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="70" y="326" width="557" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="70" y="255" width="557" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="70" y="183" width="557" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="70" y="111" width="557" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="70" y="434" width="557" height="1" stroke="none" stroke-width="0" fill="#ebebeb"></rect><rect x="70" y="362" width="557" height="1" stroke="none" stroke-width="0" fill="#ebebeb"></rect><rect x="70" y="291" width="557" height="1" stroke="none" stroke-width="0" fill="#ebebeb"></rect><rect x="70" y="219" width="557" height="1" stroke="none" stroke-width="0" fill="#ebebeb"></rect><rect x="70" y="147" width="557" height="1" stroke="none" stroke-width="0" fill="#ebebeb"></rect></g><g><rect x="70" y="470" width="557" height="1" stroke="none" stroke-width="0" fill="#333333"></rect></g></g><g></g><g><g><text text-anchor="end" x="56" y="475.4" font-family="Arial" font-size="14" stroke="none" stroke-width="0" fill="#444444">0.0</text></g><g><text text-anchor="end" x="56" y="403.59999999999997" font-family="Arial" font-size="14" stroke="none" stroke-width="0" fill="#444444">0.2</text></g><g><text text-anchor="end" x="56" y="331.79999999999995" font-family="Arial" font-size="14" stroke="none" stroke-width="0" fill="#444444">0.4</text></g><g><text text-anchor="end" x="56" y="260" font-family="Arial" font-size="14" stroke="none" stroke-width="0" fill="#444444">0.6</text></g><g><text text-anchor="end" x="56" y="188.20000000000002" font-family="Arial" font-size="14" stroke="none" stroke-width="0" fill="#444444">0.8</text></g><g><text text-anchor="end" x="56" y="116.4" font-family="Arial" font-size="14" stroke="none" stroke-width="0" fill="#444444">1.0</text></g></g></g><g></g></svg>