行図を作成する小さなスクリプトがあります。出力は、div要素に追加されるSVGです。問題は、SVGが表示されないことです。SVGをコピーしてJSFiddleに貼り付けると、正しく表示されます。
index.htmlは次のようになります。
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 14px;
height: 100vH;
}
</style>
</head>
<body>
<div id="app" style="position:absolute;left:50px;width:500px;height:300px;"></div>
<script src="app.bundle.js"></script>
<script>
let a = new LiveLineAnno.default(
document.getElementById("app"),
[
{ x: 0, y: 0 },
{ x: 5, y: 40 },
{ x: 20, y: 30 },
{ x: 30, y: 80 },
{ x: 100, y: 0 }
]
);
</script>
</body>
</html>
スクリプトが完了した後の出力：
<div id="app" style="position:absolute;left:50px;width:500px;height:300px;">
<div style="width: 100%; height: 100%; position: relative;"><svg width="500" height="300"
style="fill: none; stroke: rgb(170, 221, 255); width: 500px; height: 300px; stroke-width: 2px; display: block; border-left: 1px solid black; border-bottom: 1px solid black;">
<path d="M0 300 L25 150 L100 187.5 L150 0 L500 300"></path>
</svg>
<div
style="position: absolute; bottom: -40px; height: 40px; left: 0px; right: 0px; display: flex; justify-content: space-between;">
<div data-value="0">0</div>
<div data-value="25">25</div>
<div data-value="50">50</div>
<div data-value="75">75</div>
<div data-value="100">100</div>
</div>
<div
style="position: absolute; top: 0px; left: -40px; width: 40px; bottom: 0px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end;">
<div data-value="80">80</div>
<div data-value="60">60</div>
<div data-value="40">40</div>
<div data-value="20">20</div>
<div data-value="0">0</div>
</div>
</div>
そしてここにフィドル：
<div id="app" style="position:absolute;left:50px;width:500px;height:300px;"><div style="width: 100%; height: 100%; position: relative;"><svg width="500" height="300" style="fill: none; stroke: rgb(170, 221, 255); width: 500px; height: 300px; stroke-width: 2px; display: block; border-left: 1px solid black; border-bottom: 1px solid black;"><path d="M0 300 L25 150 L100 187.5 L150 0 L500 300"></path></svg><div style="position: absolute; bottom: -40px; height: 40px; left: 0px; right: 0px; display: flex; justify-content: space-between;"><div data-value="0">0</div><div data-value="25">25</div><div data-value="50">50</div><div data-value="75">75</div><div data-value="100">100</div></div><div style="position: absolute; top: 0px; left: -40px; width: 40px; bottom: 0px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end;"><div data-value="80">80</div><div data-value="60">60</div><div data-value="40">40</div><div data-value="20">20</div><div data-value="0">0</div></div></div></div>SVGが表示されないのはなぜですか？
問題は、間違ったcreateElement関数を使用したことです。使った
let svg = document.createElement("svg");
しかし正しい方法は
let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加