如何使用元素对SVG内容进行样式化/操作

Question

我在一个页面上有三个SVG图像。一个是“图像编辑器”，你可以输入一些文本，一个图标，拖动和左右缩放，等等。

另外两个SVG通过use元素使用来自顶部SVG的内容，并显示最终结果的预览。

当我在编辑器中编辑一些东西时，这两个预览会自动更新。很完美.但我不想在底部两个预览SVG中显示边界框、转换工具、指南等。

有没有一种方法可以对那些SVG的（阴影）DOM进行样式化(CSS)或操作(JS)以不显示这些额外的元素？

Answer 1

修改编辑器代码，使绘图元素进入一个组，而句柄元素进入另一个组。然后在克隆中，SVG让 元素引用第一组。

null

svg {
  border: solid 1px black;
}

<svg width="500" height="300" viewBox="0 0 500 300">
  
  <g id="drawing">
    <ellipse cx="250" cy="150" rx="200" ry="100" fill="orange"/>
  </g>
  
  <g id="handles">
    <rect x="50" y="50" width="400" height="200" fill="none" stroke="blue" stroke-dasharray="10"/>
  </g>
  
</svg>


<br/>


<svg width="250" height="150" viewBox="0 0 500 300">
  <use xlink:href="#drawing"/>
</svg>