SVG not showing after dynamicallly added into HTML document

SVG not showing after dynamicallly added into HTML document - javascript

I am using Saxon CE for some transformations from xml to another xml and then to svg. My point is, that the transformations completes successfully and in source I am able to see that the svg has been added into the HTML document, however is not visible for some reason (I have set visibility to visible and that does not help). I am attaching the HTML structure as it before the transformations begins, then is the transformation output and finally the updated HTML. When I open the full HTML just in browser it works fine. Could it be some runtime problem i guess, however I do not know where to look for more information.
EDIT: I have previously used "g" elements, I thought it should be connected with it, but do not seems like it
<g>
Thanks in advance for any tips and help,
<!DOCTYPE html>
<html>
<head>
<title>Book Catalogue</title>
<script src="http://localhost:12345/SaxonCE/Saxonce.nocache.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
function PK_func(in_xml) {
var proc = Saxon.newXSLT20Processor(Saxon.requestXML("Flattening_XSD_StackOverFlow.xsl"));
proc.transformToDocument(Saxon.parseXML(in_xml));
var rd1URI = proc.getResultDocuments()[0];
var rd1Doc = proc.getResultDocument(rd1URI);
//var proc2 = Saxon.newXSLT20Processor(Saxon.requestXML("Flattening_XSD_StackOverFlow.xsl"));
//proc2.updateHTMLDocument(Saxon.parseXML(in_xml));
return rd1Doc;
}
function PK_func_2(in_xml) {
var proc = Saxon.newXSLT20Processor(Saxon.requestXML("Visualise_flatten_xsd.xsl"));
proc.transformToDocument(Saxon.parseXML(in_xml));
var rd1URI = proc.getResultDocuments()[0];
var rd1Doc = proc.getResultDocument(rd1URI);
var proc2 = Saxon.newXSLT20Processor(Saxon.requestXML("Visualise_flatten_xsd.xsl"));
proc2.updateHTMLDocument(rd1Doc);
return rd1Doc;
}
function get_width(input_text) {
var measuringCanvas = document.getElementById('measuringCanvas');
var ctx = measuringCanvas.getContext("2d");
ctx.font = "12px Verdana";
var width = ctx.measureText(input_text).width;
return width + 60;
}
window.onload = function() {
var fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function(e) {
var file = fileInput.files[0];
var reader = new FileReader();
reader.onload = function(e)
{
var xml = reader.result;
var flatten_xsd = PK_func(xml);
console.log(flatten_xsd);
var visualised_xsd = PK_func_2(flatten_xsd);
console.log(visualised_xsd);
}
reader.readAsText(file);
});
}
</script>
</head>
<body>
<div id="sortToolTip" class="tooltip" style="position:fixed; visibility:hidden; left:0px; top:0px">
Click to sort on this column
</div>
<canvas id="measuringCanvas" display="none" width="50px" height="50px" style="display: none;"></canvas>
<h1 id="title">Header</h1>
<input type="file" id="fileInput">
<h2>Genres</h2>
<div id="genres"></div>
<h2>Books</h2>
<div id="XYZ"></div>
</body>
</html>
The added SVG:
<svg visibility="visible" height="500" width="500">
<svg visibility="visible" transform="scale(37.03703703703704)">
<rect style="fill: none; stroke: black; stroke-width:0.1" height="1" width="2" y="1" x="5.5"/>
<line style="stroke: black; stroke-width:0.1;" y2="2.5" x2="6.5" y1="2" x1="6.5"/>
<line style="stroke: black; stroke-width:0.1;" y2="2.5" x2="6.5" y1="2.5" x1="6.5"/>
<line style="stroke: black; stroke-width:0.1;" y2="3" x2="6.5" y1="2.5" x1="6.5"/>
<svg visibility="visible" pk:maxy="8" pk:maxx="12.5" pk:thisx="7.5">
<rect style="fill: none; stroke: black; stroke-width:0.1" height="1" width="2" y="3" x="5.5"/>
<line style="stroke: black; stroke-width:0.1;" y2="4.5" x2="6.5" y1="4" x1="6.5"/>
<line style="stroke: black; stroke-width:0.1;" y2="4.5" x2="11.5" y1="4.5" x1="1.5"/>
<line style="stroke: black; stroke-width:0.1;" y2="5" x2="1.5" y1="4.5" x1="1.5"/>
<line style="stroke: black; stroke-width:0.1;" y2="5" x2="4" y1="4.5" x1="4"/>
<line style="stroke: black; stroke-width:0.1;" y2="5" x2="6.5" y1="4.5" x1="6.5"/>
<line style="stroke: black; stroke-width:0.1;" y2="5" x2="9" y1="4.5" x1="9"/>
<line style="stroke: black; stroke-width:0.1;" y2="5" x2="11.5" y1="4.5" x1="11.5"/>
<svg visibility="visible" pk:maxy="6" pk:maxx="2.5" pk:thisx="2.5">
<rect style="fill: none; stroke: black; stroke-width:0.1;" height="1" width="2" y="5" x="0.5"/>
</svg>
<svg visibility="visible" pk:maxy="6" pk:maxx="5" pk:thisx="5">
<rect style="fill: none; stroke: black; stroke-width:0.1;" height="1" width="2" y="5" x="3"/>
</svg>
<svg visibility="visible" pk:maxy="6" pk:maxx="7.5" pk:thisx="7.5">
<rect style="fill: none; stroke: black; stroke-width:0.1;" height="1" width="2" y="5" x="5.5"/>
</svg>
<svg visibility="visible" pk:maxy="6" pk:maxx="10" pk:thisx="10">
<rect style="fill: none; stroke: black; stroke-width:0.1;" height="1" width="2" y="5" x="8"/>
</svg>
<svg visibility="visible" pk:maxy="8" pk:maxx="12.5" pk:thisx="12.5">
<rect style="fill: none; stroke: black; stroke-width:0.1" height="1" width="2" y="5" x="10.5"/>
<line style="stroke: black; stroke-width:0.1;" y2="6.5" x2="11.5" y1="6" x1="11.5"/>
<line style="stroke: black; stroke-width:0.1;" y2="6.5" x2="11.5" y1="6.5" x1="11.5"/>
<line style="stroke: black; stroke-width:0.1;" y2="7" x2="11.5" y1="6.5" x1="11.5"/>
<svg visibility="visible" pk:maxy="8" pk:maxx="12.5" pk:thisx="12.5">
<rect style="fill: none; stroke: black; stroke-width:0.1;" height="1" width="2" y="7" x="10.5"/>
</svg>
</svg>
</svg>
</svg>
</svg>
The final document (which is rendering "fine", at at least renders at all :)) :
<html>
<head>
<title>Book Catalogue</title>
<script src="http://localhost:12345/SaxonCE/Saxonce.nocache.js" type="text/javascript"></script><script defer="defer">Saxonce.onInjectionDone('Saxonce')</script>
<script type="text/javascript" language="javascript">
function PK_func(in_xml) {
var proc = Saxon.newXSLT20Processor(Saxon.requestXML("Flattening_XSD_StackOverFlow.xsl"));
proc.transformToDocument(Saxon.parseXML(in_xml));
var rd1URI = proc.getResultDocuments()[0];
var rd1Doc = proc.getResultDocument(rd1URI);
return rd1Doc;
}
function PK_func_2(in_xml) {
var proc = Saxon.newXSLT20Processor(Saxon.requestXML("Visualise_flatten_xsd.xsl"));
proc.transformToDocument(Saxon.parseXML(in_xml));
var rd1URI = proc.getResultDocuments()[0];
var rd1Doc = proc.getResultDocument(rd1URI);
var proc2 = Saxon.newXSLT20Processor(Saxon.requestXML("Visualise_flatten_xsd.xsl"));
proc2.updateHTMLDocument(rd1Doc);
return rd1Doc;
}
function get_width(input_text) {
var measuringCanvas = document.getElementById('measuringCanvas');
var ctx = measuringCanvas.getContext("2d");
ctx.font = "12px Verdana";
var width = ctx.measureText(input_text).width;
return width + 60;
}
window.onload = function() {
var fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function(e) {
var file = fileInput.files[0];
var reader = new FileReader();
reader.onload = function(e)
{
var xml = reader.result;
var flatten_xsd = PK_func(xml);
console.log(flatten_xsd);
var visualised_xsd = PK_func_2(flatten_xsd);
console.log(visualised_xsd);
}
reader.readAsText(file);
});
}
</script>
</head>
<body>
<div id="sortToolTip" class="tooltip" style="position:fixed; visibility:hidden; left:0px; top:0px">
Click to sort on this column
</div>
<canvas id="measuringCanvas" display="none" width="50px" height="50px" style="display: none;"></canvas>
<h1 id="title">Header</h1>
<input id="fileInput" type="file">
<h2>Genres</h2>
<div id="genres"></div>
<h2>Books</h2>
<div id="XYZ"></div>
<iframe tabindex="-1" style="position: absolute; width: 0px; height: 0px; border: medium none;" id="Saxonce" src="javascript:''"></iframe>
<svg visibility="visible" height="500" width="500">
<svg visibility="visible" transform="scale(37.03703703703704)">
<rect style="fill: none; stroke: black; stroke-width:0.1" height="1" width="2" y="1" x="5.5"/>
<line style="stroke: black; stroke-width:0.1;" y2="2.5" x2="6.5" y1="2" x1="6.5"/>
<line style="stroke: black; stroke-width:0.1;" y2="2.5" x2="6.5" y1="2.5" x1="6.5"/>
<line style="stroke: black; stroke-width:0.1;" y2="3" x2="6.5" y1="2.5" x1="6.5"/>
<svg visibility="visible" pk:maxy="8" pk:maxx="12.5" pk:thisx="7.5">
<rect style="fill: none; stroke: black; stroke-width:0.1" height="1" width="2" y="3" x="5.5"/>
<line style="stroke: black; stroke-width:0.1;" y2="4.5" x2="6.5" y1="4" x1="6.5"/>
<line style="stroke: black; stroke-width:0.1;" y2="4.5" x2="11.5" y1="4.5" x1="1.5"/>
<line style="stroke: black; stroke-width:0.1;" y2="5" x2="1.5" y1="4.5" x1="1.5"/>
<line style="stroke: black; stroke-width:0.1;" y2="5" x2="4" y1="4.5" x1="4"/>
<line style="stroke: black; stroke-width:0.1;" y2="5" x2="6.5" y1="4.5" x1="6.5"/>
<line style="stroke: black; stroke-width:0.1;" y2="5" x2="9" y1="4.5" x1="9"/>
<line style="stroke: black; stroke-width:0.1;" y2="5" x2="11.5" y1="4.5" x1="11.5"/>
<svg visibility="visible" pk:maxy="6" pk:maxx="2.5" pk:thisx="2.5">
<rect style="fill: none; stroke: black; stroke-width:0.1;" height="1" width="2" y="5" x="0.5"/>
</svg>
<svg visibility="visible" pk:maxy="6" pk:maxx="5" pk:thisx="5">
<rect style="fill: none; stroke: black; stroke-width:0.1;" height="1" width="2" y="5" x="3"/>
</svg>
<svg visibility="visible" pk:maxy="6" pk:maxx="7.5" pk:thisx="7.5">
<rect style="fill: none; stroke: black; stroke-width:0.1;" height="1" width="2" y="5" x="5.5"/>
</svg>
<svg visibility="visible" pk:maxy="6" pk:maxx="10" pk:thisx="10">
<rect style="fill: none; stroke: black; stroke-width:0.1;" height="1" width="2" y="5" x="8"/>
</svg>
<svg visibility="visible" pk:maxy="8" pk:maxx="12.5" pk:thisx="12.5">
<rect style="fill: none; stroke: black; stroke-width:0.1" height="1" width="2" y="5" x="10.5"/>
<line style="stroke: black; stroke-width:0.1;" y2="6.5" x2="11.5" y1="6" x1="11.5"/>
<line style="stroke: black; stroke-width:0.1;" y2="6.5" x2="11.5" y1="6.5" x1="11.5"/>
<line style="stroke: black; stroke-width:0.1;" y2="7" x2="11.5" y1="6.5" x1="11.5"/>
<svg visibility="visible" pk:maxy="8" pk:maxx="12.5" pk:thisx="12.5">
<rect style="fill: none; stroke: black; stroke-width:0.1;" height="1" width="2" y="7" x="10.5"/>
</svg>
</svg>
</svg>
</svg>
</svg>
</body>
</html>

I have not checked all the script code but as you seem to create the SVG first as XML I would start first by ensuring that the SVG elements are in the SVG namespace and not in no namespace as in the sample you have shown.

Related

Fade color in path tag

In HTML with SVG you can create a rect with fading color:
<svg>
<rect width="100%" height="100%">
<animate attributeName="fill" values="red;blue;red" dur="10s" repeatCount="indefinite" />
</rect>
</svg>
Now in my code I have a path like that:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="247pt" height="543pt" viewBox="0.00 0.00 246.86 543.19">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 539.1859)">
<!-- c->e -->
<g id="a1124" class="edge">
<title>c->e</title>
<path fill="none" stroke="#ff0000" stroke-width="3" d="M208.109,-297.8625C205.1217,-279.2357 200.2512,-248.8658 195.5911,-219.8076" />
<polygon fill="#ff0000" stroke="#ff0000" stroke-width="3" points="198.9943,-218.9251 193.9549,-209.6055 192.0827,-220.0336 198.9943,-218.9251" />
</g>
</g>
</svg>
I am looking for a way to fade the color of the path along the path so that it illustrates some kind of data flow. Is there a way to accomplish that? (via CSS or Javascript).

Try this
#keyframes fade {
0% {
stroke: red;
fill: red;
}
50% {
stroke: blue;
fill: blue;
}
100% {
stroke: red;
fill: red;
}
}
#fade {
animation-name: fade;
animation-duration: 10s;
animation-iteration-count: infinite;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="247pt" height="543pt" viewBox="0.00 0.00 246.86 543.19">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 539.1859)">
<!-- c->e -->
<g id="a1124" class="edge">
<title>c->e</title>
<path id="fade" stroke="#ff0000" stroke-width="3" d="M208.109,-297.8625C205.1217,-279.2357 200.2512,-248.8658 195.5911,-219.8076" />
<polygon id="fade" stroke-width="3" points="198.9943,-218.9251 193.9549,-209.6055 192.0827,-220.0336 198.9943,-218.9251" />
</g>
</g>
</svg>

Svg clipPath location

For the following image, I am trying to clip out everything that not located in the black box shown.
But I perform the clipPath operation and feMorphology filter to show where the clipped box is being drawn. The clip path is not shown in the right position.
This is the generated svg XML
<svg id="SvgjsSvg1006" width="550" height="650" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs">
<defs id="SvgjsDefs1007">
<clipPath id="SvgjsClipPath1017">
<rect id="SvgjsRect1014" width="315" height="600" x="120" y="27"></rect>
</clipPath>
<filter id="dilate_shape">
<feMorphology operator="dilate" in="SourceGraphic" radius="5" />
</filter>
</defs>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="550" height="650" viewBox="0 0 550 650" xml:space="preserve">
<g transform="translate(285 325)">
<g filter="url("#dilate_shape")">
<rect x="-325" y="-325" height="650" width="650" fill="lightgreen" clip-path="url("#SvgjsClipPath1017")"></rect>
</g>
<image xlink:href="https://i.imgur.com/xOOB2O4.png" x="-325" y="-325" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" width="650" height="650" clip-path="url("#SvgjsClipPath1017")"></image>
</g>
</svg>
I can fix this if I remove the translate transform and add it's values into the x and y values of the child image tag. As shown in the following
With the XML being
<svg id="SvgjsSvg1006" width="550" height="650" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs">
<defs id="SvgjsDefs1007">
<clipPath id="SvgjsClipPath1017">
<rect id="SvgjsRect1014" width="315" height="600" x="120" y="27"></rect>
</clipPath>
<filter id="dilate_shape">
<feMorphology operator="dilate" in="SourceGraphic" radius="5" />
</filter>
</defs>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="550" height="650" viewBox="0 0 550 650" xml:space="preserve">
<g >
<g filter="url("#dilate_shape")">
<rect x="-40" y="0" height="650" width="650" fill="lightgreen" clip-path="url("#SvgjsClipPath1017")"></rect>
</g>
<image xlink:href="https://i.imgur.com/xOOB2O4.png" x="-40" y="0" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" width="650" height="650" clip-path="url("#SvgjsClipPath1017")"></image>
</g>
</svg>
So how to I fix this without having to add the transform values into the X and Y positions. One thing to note is that I am using fabricJs(which is a canvas library to convert from canvas to an svg output). So the transforms are automatically applied when the conversion happens. Thus tinkering with the transform values afterwards effects additional images when conversion happens

ClipPath and SVG Scaling

I am trying to get a scaled svg image to clip the pattern if it goes out side the blue container. But when I apply the clip path to the pattern for the exact same position. The pattern's X and Y position change and it ends up outside the container in the case shown below for the exact same positions and transformations applied. I also applied a feMorphology filter to show where the clipped path is being drawn.
SVG (Non clipped)
XML
<svg id="SvgjsSvg1006" width="550" height="650" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs">
<defs id="SvgjsDefs1007">
<clipPath id="SvgjsClipPath1019">
<rect id="SvgjsRect1016" width="315" height="600" x="120" y="27"></rect>
</clipPath>
<filter id="dilate_shape">
<feMorphology operator="dilate" in="SourceGraphic" radius="5" />
</filter>
</defs><!--?xml version="1.0" encoding="UTF-8" standalone="no" ?-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="550" height="650" viewBox="0 0 550 650" xml:space="preserve">
<g >
<g filter="url("#dilate_shape")">
<rect width="315" height="600" x="120" y="27" fill="blue" fill-opacity="0.2" clip-path="url("#SvgjsClipPath1019")"></rect>
</g>
<image xlink:href="https://www.dropbox.com/pri/get/697%20%5BConverted%5D.svg?_subject_uid=360738345&raw=1&size=1280x960&size_mode=3&w=AADJZ7-5-jq5Qyh2urbHo_G1FCn0ADHB-Li1KOFGuAEEQQ" transform="translate(278.34 410.34) scale(1.66 1.66)" x="-75" y="-75" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" width="150" height="150" ></image>
</g>
</svg>
SVG (Clipped)
XML
<svg id="SvgjsSvg1006" width="550" height="650" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs">
<defs id="SvgjsDefs1007">
<clipPath id="SvgjsClipPath1019">
<rect id="SvgjsRect1016" width="315" height="600" x="120" y="27"></rect>
</clipPath>
<filter id="dilate_shape">
<feMorphology operator="dilate" in="SourceGraphic" radius="5" />
</filter>
</defs><!--?xml version="1.0" encoding="UTF-8" standalone="no" ?-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="550" height="650" viewBox="0 0 550 650" xml:space="preserve">
<g >
<g filter="url("#dilate_shape")">
<rect width="315" height="600" x="120" y="27" fill="blue" fill-opacity="0.2" clip-path="url("#SvgjsClipPath1019")"></rect>
</g>
<image xlink:href="https://www.dropbox.com/pri/get/697%20%5BConverted%5D.svg?_subject_uid=360738345&raw=1&size=1280x960&size_mode=3&w=AADJZ7-5-jq5Qyh2urbHo_G1FCn0ADHB-Li1KOFGuAEEQQ" transform="translate(278.34 410.34) scale(1.66 1.66)" x="-75" y="-75" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" width="150" height="150" clip-path="url("#SvgjsClipPath1019")"></image>
</g>
</svg>
With the only difference being is that I added clip-path="url("#SvgjsClipPath1019")" to the image tag of the second svg

The error lies in the order in which the transform and clip-path attributes are applied. transform is always the last operation, and the clip-path is applied to the non-transformed element.
This snippet
<image xlink:href="..." x="-75" y="-75"
transform="translate(278.34 410.34) scale(1.66 1.66)"
clip-path="url(#SvgjsClipPath1019)" />
is equivalent to
<g transform="translate(278.34 410.34) scale(1.66 1.66)">
<image xlink:href="..." x="-75" y="-75"
clip-path="url(#SvgjsClipPath1019)" />
</g>
while you wanted to achieve this:
<g clip-path="url(#SvgjsClipPath1019)">
<image xlink:href="..." x="-75" y="-75"
transform="translate(278.34 410.34) scale(1.66 1.66)"> />
</g>

How to get all properties who are text in this object?

[edit] it's not a dupe because every properties are string when I tried typeof list[x] I want to get only the one who are x: text
I'm trying to get all the properties who are text but I can't achieve it. I don't know why the snippet is not working I made a mistake but I don't find where...
My object is like this:
document.getElementById("a").onclick = function(e){
var list = document.getElementsByTagName("svg")[0].childNodes[1].childNodes;
for (var x in list) {
if (list.hasOwnProperty(x)) {
if(list[x] === "text"){
console.log(list[x]);
}else{
console.log("no text");
}
}
}
console.log(list)
}
<button id="a">click</button>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentscripttype="application/ecmascript" contentstyletype="text/css" height="555px" preserveAspectRatio="none" style="width:1181px;height:555px;" version="1.1" viewBox="0 0 1181 555" width="1181px" zoomAndPan="magnify"><defs><filter height="300%" id="f491e1k" width="300%" x="-1" y="-1"><feGaussianBlur result="blurOut" stdDeviation="2.0"></feGaussianBlur><feColorMatrix in="blurOut" result="blurOut2" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0"></feColorMatrix><feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3"></feOffset><feBlend in="SourceGraphic" in2="blurOut3" mode="normal"></feBlend></filter></defs>
<g>
<!--entity cadvisor-->
<rect fill="#FEFECE" filter="url(#f491e1k)" height="46.29" style="stroke: #A80036; stroke-width: 1.5;" width="97" x="133.675" y="8"></rect>
<rect fill="#FEFECE" height="10" style="stroke: #A80036; stroke-width: 1.5;" width="15" x="210.675" y="13"></rect>
<rect fill="#FEFECE" height="2" style="stroke: #A80036; stroke-width: 1.5;" width="4" x="208.675" y="15"></rect>
<rect fill="#FEFECE" height="2" style="stroke: #A80036; stroke-width: 1.5;" width="4" x="208.675" y="19"></rect>
<text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="57" x="148.675" y="41.3027">cadvisor</text>
<path class="close-x" d="M 10,10 L 30,30 M 30,10 L 10,30" />
<!--entity cadvisor2-->
<rect fill="#FEFECE" filter="url(#f491e1k)" height="46.29" style="stroke: #A80036; stroke-width: 1.5;" width="104" x="433.175" y="377"></rect>
<rect fill="#FEFECE" height="10" style="stroke: #A80036; stroke-width: 1.5;" width="15" x="517.175" y="382"></rect>
<rect fill="#FEFECE" height="2" style="stroke: #A80036; stroke-width: 1.5;" width="4" x="515.175" y="384"></rect>
<rect fill="#FEFECE" height="2" style="stroke: #A80036; stroke-width: 1.5;" width="4" x="515.175" y="388"></rect>
<text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="64" x="448.175" y="410.3027">cadvisor2</text>
<path class="close-x" d="M 10,10 L 30,30 M 30,10 L 10,30" />
</g>
</svg>

You can check the tagName of an element which returns 'text' for text tags.
For all properties, check the Element documentation. SVGElement inherits from it.

It shows correct text: cadvisor and cadvisor2
by changing code to svg.getElementsByTagName('text')
document.getElementById("a").onclick = function(e){
var target = document.getElementById("target");
var list = target.getElementsByTagName('text');
for (var i=0; i<list.length; i++) {
console.log(list[i].textContent);
}
}
<button id="a">click</button>
<svg id="target" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentscripttype="application/ecmascript" contentstyletype="text/css" height="555px" preserveAspectRatio="none" style="width:1181px;height:555px;" version="1.1" viewBox="0 0 1181 555" width="1181px" zoomAndPan="magnify"><defs><filter height="300%" id="f491e1k" width="300%" x="-1" y="-1"><feGaussianBlur result="blurOut" stdDeviation="2.0"></feGaussianBlur><feColorMatrix in="blurOut" result="blurOut2" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0"></feColorMatrix><feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3"></feOffset><feBlend in="SourceGraphic" in2="blurOut3" mode="normal"></feBlend></filter></defs>
<g>
<!--entity cadvisor-->
<rect fill="#FEFECE" filter="url(#f491e1k)" height="46.29" style="stroke: #A80036; stroke-width: 1.5;" width="97" x="133.675" y="8"></rect>
<rect fill="#FEFECE" height="10" style="stroke: #A80036; stroke-width: 1.5;" width="15" x="210.675" y="13"></rect>
<rect fill="#FEFECE" height="2" style="stroke: #A80036; stroke-width: 1.5;" width="4" x="208.675" y="15"></rect>
<rect fill="#FEFECE" height="2" style="stroke: #A80036; stroke-width: 1.5;" width="4" x="208.675" y="19"></rect>
<text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="57" x="148.675" y="41.3027">cadvisor</text>
<path class="close-x" d="M 10,10 L 30,30 M 30,10 L 10,30" />
<!--entity cadvisor2-->
<rect fill="#FEFECE" filter="url(#f491e1k)" height="46.29" style="stroke: #A80036; stroke-width: 1.5;" width="104" x="433.175" y="377"></rect>
<rect fill="#FEFECE" height="10" style="stroke: #A80036; stroke-width: 1.5;" width="15" x="517.175" y="382"></rect>
<rect fill="#FEFECE" height="2" style="stroke: #A80036; stroke-width: 1.5;" width="4" x="515.175" y="384"></rect>
<rect fill="#FEFECE" height="2" style="stroke: #A80036; stroke-width: 1.5;" width="4" x="515.175" y="388"></rect>
<text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="64" x="448.175" y="410.3027">cadvisor2</text>
<path class="close-x" d="M 10,10 L 30,30 M 30,10 L 10,30" />
</g>
</svg>

How do i make a button that will keep changing the light each time i press it for a traffic light?

i need my code to keep changing the lights. each time i press the button i want the traffic light to display red then red and yellow together then green only and i want this process to repeat each time i press the button. i need help for this. so far i have got this code.
<!DOCTYPE html>
<html>
<head>
<title>Traffic Light</title>
</head>
<body>
<h1>Traffic Light</h1>
<p>Click the button for light to change.</p>
<div
style="width:100.5px;height:320px;border:3px solid #000;">
<button onclick=circle2.style.fill="yellow";><Change Lights
<button onclick=circle1.style.fill="transparent";><Change Lights
<button onclick=circle2.style.fill="transparent";><Change Lights
<button onclick=circle3.style.fill="green";>Change Lights
</button>
<svg id="svg1" style="width: 3.5in; height: 1in">
<circle id="circle1" r="40" cx="50" cy="50" style="fill: red; stroke: black; stroke-width: 2"/>
</svg>
<svg id="svg2" style="width: 3.5in; height: 1in">
<circle id="circle2" r="40" cx="50" cy="50" style="fill: transparent; stroke: black; stroke-width: 2"/>
</svg>
<svg id="svg3"style="width: 3.5in; height: 1in">
<circle id="circle3" r="40" cx="50" cy="50" style="fill: transparent; stroke: black; stroke-width: 2"/>
</svg>
</script>
</div>
</body>
</html>
can you please help me find the solution for my work
thank you.

Try this
<p>Click the button for light to change.</p>
<div
style="width:100.5px;height:420px;border:3px solid #000;">
<button onclick='circle2.style.fill="yellow"'>Change Lights</button>
<button onclick='circle1.style.fill="transparent"'>Change Lights</button>
<button onclick='circle2.style.fill="transparent"'>Change Lights</button>
<button onclick='circle3.style.fill="green"'>Change Lights</button>
<svg id="svg1" style="width: 3.5in; height: 1in">
<circle id="circle1" r="40" cx="50" cy="50" style="fill: red; stroke: black; stroke-width: 2"/>
</svg>
<svg id="svg2" style="width: 3.5in; height: 1in">
<circle id="circle2" r="40" cx="50" cy="50" style="fill: transparent; stroke: black; stroke-width: 2"/>
</svg>
<svg id="svg3"style="width: 3.5in; height: 1in">
<circle id="circle3" r="40" cx="50" cy="50" style="fill: transparent; stroke: black; stroke-width: 2"/>
</svg>
</div>

Try this:
var circle = document.getElementById('circle');
var colors = ['red', 'yellow', 'green'];
var index = 0;
document.getElementById('traffic').onclick = function() {
index++;
if (index == colors.length) {
index = 0;
}
circle.style.fill = colors[index];
};
<button id="traffic">Change Lights</button>
<svg id="svg" style="width: 3.5in; height: 1in">
<circle id="circle" r="40" cx="50" cy="50" style="fill: red; stroke: black; stroke-width: 2"/>
</svg>

Develop Reference

JavaScript is the programming language of the Web.

SVG not showing after dynamicallly added into HTML document - javascript

I have not checked all the script code but as you seem to create the SVG first as XML I would start first by ensuring that the SVG elements are in the SVG namespace and not in no namespace as in the sample you have shown.

Related

Fade color in path tag

Svg clipPath location

ClipPath and SVG Scaling

How to get all properties who are text in this object?

How do i make a button that will keep changing the light each time i press it for a traffic light?

Categories

Resources