通过 javascript 绘图的 SVG 的显示不显示
[英]the display of the SVG drawing via javascript does not display
问题描述
My SVG table made in javascript is not displayed while if we look at the HTML source code created by javascript in the console, the SVG HTML elements are present and if I copy and paste this code into the HTML page, the table is displayed correctly. 我不明白是什么阻止了 javascript 直接显示。 谢谢您的帮助。 下面是 HTML 和 JS 代码
代码 HTML：
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test SVG</title>
<style>
div, svg {width:800px; height:100px;}
</style>
</head>
<body>
<div id="div0"></div>
<script src="tablature.js"></script>
</body>
代码 Javascript：tablature.js
var nomDiv = div0;
var svgns = "http://www.w3.org/2000/svg";
function creTablature(x,y,W) {
var rect = document.createElementNS(svgns, 'rect');
rect.setAttributeNS(null, 'x', x);
rect.setAttributeNS(null, 'y', y);
rect.setAttributeNS(null, 'height', '100');
rect.setAttributeNS(null, 'width', W);
rect.setAttributeNS(null, 'fill', 'none');
rect.setAttributeNS(null, 'stroke', '#000');
nomSVG.appendChild(rect);
var ligne = document.createElementNS(svgns, "line");
ligne.setAttributeNS(null, "x1", x);
ligne.setAttributeNS(null, "y1", y + 33);
ligne.setAttributeNS(null, "x2", x + W);
ligne.setAttributeNS(null, "y2", y + 33);
ligne.setAttributeNS(null, 'stroke', '#000');
nomSVG.appendChild(ligne);
var ligne = document.createElementNS(svgns, "line");
ligne.setAttributeNS(null, "x1", x);
ligne.setAttributeNS(null, "y1", y + 66);
ligne.setAttributeNS(null, "x2", x + W);
ligne.setAttributeNS(null, "y2", y + 66);
ligne.setAttributeNS(null, 'stroke', '#000');
nomSVG.appendChild(ligne);
creBar(0,0,40);
}
function creBar(x,y,L) {
var ligne = document.createElementNS(svgns, "line");
ligne.setAttributeNS(null, "x1", x + L);
ligne.setAttributeNS(null, "y1", y);
ligne.setAttributeNS(null, "x2", x + L);
ligne.setAttributeNS(null, "y2", y + 100);
ligne.setAttributeNS(null, 'stroke', '#000');
nomSVG.appendChild(ligne);
}
function addText(x,y,texte) {
var newText = document.createElementNS(svgns,"text");
newText.setAttributeNS(null,"x",x);
newText.setAttributeNS(null,"y",y);
var textNode = document.createTextNode(texte);
newText.appendChild(textNode);
dnomSVG.appendChild(newText);
}
function insertTablature(svgID) {
let svg = document.createElement("svg");
svg.id = svgID;
nomDiv.appendChild(svg);
nomSVG = document.getElementById(svgID);
creTablature(0,0,800);
addText(14,54,"P");
addText(14,88,"T");
}
insertTablature("svg1");
1 个解决方案
解决方案1
0 已采纳 2021-03-09 14:20:16
在现代浏览器（IE11 以上的任何浏览器）中，您可以创建自己的 HTML 标签<svg-tablature>
并使用 HTML：
<svg-tablature width="200" fill="red"></svg-tablature>
<svg-tablature width="300" fill="pink"></svg-tablature>
去创造：
使用一次（每次页面加载）自定义元素定义：
免责声明：这是示例代码； 它需要更多调整以适合您的代码示例
<style> svg-tablature { display:inline-block; width:200px; } </style> <svg-tablature width="200" fill="red"></svg-tablature> <svg-tablature width="300" fill="pink"></svg-tablature> <script> customElements.define('svg-tablature', class extends HTMLElement { connectedCallback() { let x = this.getAttribute("x") || 0; let y = this.getAttribute("y") || 0; let width= this.getAttribute("width") || 100; let height= this.getAttribute("height") || 100; let fill = this.getAttribute("fill") || "green"; let stroke = "black"; this.svg = document.createElementNS("http://www.w3.org/2000/svg","svg"); this.svg.setAttribute("viewBox",`0 0 ${width} ${height}`); this.append(this.svg); this.add("rect",{x:0,y:0,height,width,fill,stroke}); stroke="blue"; this.add("line",{x1:x,y1:"33%",x2:"100%",y2:"33%",stroke}); this.add("line",{x1:x,y1:"66%",x2:"100%",y2:"66%",stroke}); let L = 40; this.add("line",{x1:x+L,y1:y,x2:x+L,y2:"100%",stroke}); this.addtext(14,54,"P"); this.addtext(14,88,"T"); } add(type, attrs){ let element= document.createElementNS("http://www.w3.org/2000/svg",type); Object.keys(attrs).forEach(name => element.setAttribute(name,attrs[name])); return this.svg.appendChild(element); } addtext(x,y,txt){ this.add("text",{x,y}).innerHTML =txt; } }); </script>
笔记：
add和addtext是<svg-tablature>DOM 元素上的方法所以你总是可以打电话：
document.getElementById( someID ).addtext( 20, 30, "Hello World!")
通过JavaScript连接到TD时，SVG不显示
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.