如何通過Javascript中的svg rect顯示文本

我想通過svg rect顯示文本。文本隱藏在示例中。我想全文爲可見：如何通過Javascript中的svg rect顯示文本

<svg width="400" height="110"> 
 
    <rect width="300" height="100" style="fill:white;stroke-width:3;stroke:rgb(0,0,0);"/> 
 
    <text x="10" y="35" fill="red">I love SVG! Text Chart</text> 
 
</svg> 
 

 
<svg height="300" width="60" style="position:absolute;left:20px;top:20px"> 
 
<rect width="300" height="50" style="fill:yellow;stroke-width:3;stroke:rgb(0,0,0);"/> 
 

 
</svg>

來源

2017-04-27 Panjanatham

這RECT你希望它在你有2這裏是re，，白色和黃色，內部是白色的黃色......通常你可以使用標籤對它們進行分組。 – manni

文本應顯示在yellew矩形...但文本被黃色矩形隱藏...我希望文本可見，它顯示在黃色矩形...任何其他答案 – Panjanatham

可能的重複[如何使用z-索引在svg元素？]（http://stackoverflow.com/questions/17786618/how-to-use-z-index-in-svg-elements） – CBroe

下面是更新後的代碼： -

<svg width="400" height="110"> 
 
    <rect width="300" height="100" style="fill:white;stroke-width:3;stroke:rgb(0,0,0);"/> 
 
    
 
</svg> 
 

 
<svg height="300" width="1000" style = "position:absolute;left:20px;top:20px"> 
 
    
 
<rect width="60" height="60" style="fill:yellow;stroke-width:3;stroke:rgb(0,0,0);"/> 
 
<text x="10" y="35" fill="red">I love SVG! Text Chart</text> 
 
</svg>

來源

2017-04-27 12:27:46

請不要更改元素從一個地方到另一個..我已經應用z-index，但它不起作用..任何其他答案 – Panjanatham

@Panjanatham根據SVG規範版本1.1渲染順序是基於文檔順序，z-inxed不會在SVG中工作 –

如何通過Javascript中的svg rect顯示文本

回答

相關問題