0

css スタイル要素の上に SVG ラインを表示するにはどうすればよいですか? 私のhtmlファイルには、d3を使用してjavascriptで作成されたsvgの白い背景があります。その上に、これらの css で定型化された四角形を配置し、その上に、svg 四角形の上にまたがる JavaScript で作成された svg 線を配置したいと考えています。問題は、線が css 長方形の背後に表示され続けることです。助言がありますか？次のように d3 を使用して白い背景を作成します。

var vizSVG = d3.select("#viz")
                    .append("svg:svg")
                    .attr("width",page_width)
                    .attr("height",page_height)

そして、次のように html スタイル要素内に css 長方形を作成します。

<style>
                rectangle{
                    border-radius: 8px;
                    width:20%;
                    height:32px;
                    text-indent:10px;
                    padding-top:20px;
                    padding-left:12px;
                    font-family: Courier, Bold, sans-serif;
                    font-size: 13px;
                    display: block;
                    }
</style>

最後に、次のように d3 を使用して svg 行も追加したいと思います。

vizSVG.append("line")
    .attr("x1",0)
    .attr("y1",0)
    .attr("x2",1000)
    .attr("y2",1000)
    .style("stroke", "black")
    .style("stroke-width", 150)
    .attr("stroke-linecap","round");

助言がありますか？

4

1 に答える 1

0

css コードの z-index を変更すると役に立ちましたが、svg タグの z-index を変更して正しい要素を一番上に配置する方法を見つける必要があります。答えてくれた人ありがとう

ダンテ

于 2013-08-24T16:00:38.987 に答える