通过JS操作SVG

时间:2019-04-29 15:55:56

标签: javascript svg

我有一个类似于下面的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>

是否可以通过JS删除<g clip-path="url(...#_ABSTRACT_RENDERER_ID_5)">

1 个答案:

答案 0 :(得分:0)

当您选择它时,您应该能够删除它。你尝试过

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>