如何樣式/操作SVG的內容USE元素

Question

我在頁面上有三個SVG圖像。一個是「圖像編輯器」，您可以在其中輸入一些文本，圖標，拖動和縮放等等。

另外兩個SVG通過USE元素使用頂級SVG中的內容，並顯示最終結果。

當我編輯在編輯器中的東西，兩個預覽自動更新。完善。但我不想在底部的兩個預覽SVG中顯示邊界框，轉換工具，指南等。

有沒有一種方法來樣式（CSS）或操縱（JS）這些SVG的（影子）DOM不顯示這些額外的元素？

Answer 1

更改編輯器代碼，以便繪圖元素進入一個組，並且把手元素進入另一個組。然後在您的克隆中，SVG將您的<use>元素引用到第一組。

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

就像@paulLeBeau答案我建議把它的一組元素之外。
這裏的javascript代碼將把句柄放在組元素的所有角落。 （在本例中爲edit-group）。
如果你有一個你已經畫好的組，你可以簡單地把這個組放到這個代碼中，它應該創建句柄。

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>