如何设置样式/操作 SVG USE 元素的内容

Question

I have three SVG images on a page. One is an "image editor" where you can enter some text, an icon, drag and scale it around, etc.

The other two SVG's use the content from the top SVG through a USE element and displays a preview of the end result.

When I edit something in the editor, the two preview automatically update. Perfect. But I don't want to show the bounding box, transform tools, guides, etc in the bottom two preview SVG's.

Is there a way to style (CSS) or manipulate (JS) the (shadow)DOM of those SVG's to not display these extra elements?

Answer 1

Alter your editor code so that the drawing elements go into one group and the handle elements go into another group. Then in your clone SVGs have your <use> elements reference the first group.

 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>

Answer 2

Just like @paulLeBeau answer i suggest putting it outside a group of elements.
The javascript code here will put the handles on all the corners of the group element. ( edit-group in this example).
If you have a group that you allready draw to you can simply put that group into this code and it should make the handles.

 function setAttributes(elem, attrs) { for (var key in attrs) { elem.setAttribute(key, attrs[key]); } } document.addEventListener("DOMContentLoaded", function(event) { var svgns = "http://www.w3.org/2000/svg" var svgdoc = document.getElementById("edit-svg"); var editgroup = svgdoc.getElementById("edit-group"); var grouprect = editgroup.getBBox(); var handle = document.createElementNS(svgns, "rect"); setAttributes(handle, { "transform": "translate(-1.5 -1.5)", "fill": "none", "stroke": "black", "stroke-width": "0.5", "width": "3", "height": "3", "x": grouprect.x, "y": grouprect.y }); svgdoc.appendChild(handle); var handle2 = document.createElementNS(svgns, "rect"); setAttributes(handle2, { "transform": "translate(-1.5 -1.5)", "fill": "none", "stroke": "black", "stroke-width": "0.5", "width": "3", "height": "3", "x": grouprect.x + grouprect.width, "y": grouprect.y }); svgdoc.appendChild(handle2); var handle3 = document.createElementNS(svgns, "rect"); setAttributes(handle3, { "transform": "translate(-1.5 -1.5)", "fill": "none", "stroke": "black", "stroke-width": "0.5", "width": "3", "height": "3", "x": grouprect.x, "y": grouprect.y + grouprect.height }); svgdoc.appendChild(handle3); var handle4 = document.createElementNS(svgns, "rect"); setAttributes(handle4, { "transform": "translate(-1.5 -1.5)", "fill": "none", "stroke": "black", "stroke-width": "0.5", "width": "3", "height": "3", "x": grouprect.x + grouprect.width, "y": grouprect.y + grouprect.height, }); svgdoc.appendChild(handle4); var dotted = document.createElementNS(svgns, "rect"); setAttributes(dotted, { "fill": "none", "stroke": "black", "stroke-width": "0.5", "stroke-dasharray": "5", "width": grouprect.width, "height": grouprect.height, "x": grouprect.x, "y": grouprect.y }); svgdoc.appendChild(dotted); });

 .main { border: 1px solid black; } #edit-svg { width: 500px; } .preview svg { border: 1px solid black; }

 <div class="main"> <svg id="edit-svg" viewbox="0 0 110 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="edit-group"> <text x=5 y=40 font-size="10" stroke="firebrick">Ask us almost anything</text> </g> </svg> </div> <div class="preview"> <h2>Preview</h2> <svg width="500px" viewBox="0 0 110 50"> <use x="0" y="0" xlink:href="#edit-group" /> </svg> </div>