如何通过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显示文本

回答

相关问题