0
JavaScriptを使用してSVGをインラインで描画しています。私はポリゴンを試しましたが、ほとんどのパス。私は<svg>タグに正しいSVGであるパス（この単純化された例では1つ）を設定します。私はこれを知っています：JavaScriptインラインSVGレンダリングしない
- svgタグの内容をファイルにコピーしてInkscapeで開くと、結果として得られる画像は期待どおりです。
</path>終了タグを削除するなどの方法でFirefoxのインスペクタで<path>を変更した場合（Firefoxがコードを元々の方法で修復する）、その特定のパスは表示されますが残りはまだ勝ちます't。- javascriptの実行後にページのすべてのHTMLをコピーして、新しいhtmlファイルに入れると、svgが正しく表示されます。
私は当初Firefoxでこの問題に遭遇しましたが、svgの作成がEdgeでも動作しないことを確認しました。
インラインsvgレンダリングは、作成した直後にどうすればできますか？
EDIT：JavaScript and SVG: Error on createElement()と同じではありません。その質問は、HTMLではなくSVG文書に関係しています。また、エラーメッセージも表示されません。
<html>
<head></head>
<body>
<svg id="drawing"></svg>
<script>
function creel(tagname, id, cla, attrs) {
var n = document.createElement(tagname);
if (id) {
n.id = id;
}
if (cla) {
n.className = cla;
}
if (attrs) {
for (var i = 0; i < attrs.length; i = i + 2) {
n.setAttribute(attrs[i], attrs[i + 1]);
}
}
return n;
}
function drawline(c, ax, ay, bx, by, style) {
// Method for svg
var d = "M" + ax + "," + ay + " L" + bx + "," + by;
var p = creel("path", "", "", ["d", d]);
if (style) {
p.setAttribute("style", style);
} else {
p.setAttribute("style", "stroke:#555555;stroke-width:2; fill:none;");
}
c.appendChild(p);
}
function drawit() {
var c = document.getElementById("drawing");
c.setAttribute("width", 500);
c.setAttribute("height", 500);
c.setAttribute("viewBox", "0 0 500 500");
c.setAttribute("xmlns", "http://www.w3.org/2000/svg");
c.setAttribute("style", "border-style:solid;border-width:1px;background:#eeeeee;");
var thinstyle = "stroke:#555555;stroke-width:2; fill:none;";
drawline(c, 10, 10, 400, 400, thinstyle);
}
window.onload = function() {
drawit();
}
</script>
</body>
</html>
SVGドキュメントでもHTMLドキュメントでも違いなく、createElementを使ってSVG要素を作成することはできません。 createElementを使用すると構文エラーではないので、エラーメッセージは表示されません。 –