1
I have several SVG’s and need to insert them dynamically into HTML5 and responsibly... How do I do this feat? Remembering that I will have to manipulate each image svg id.
NOTE: THE SVG WILL BE ITERATIVE (IN GENERAL SUMMARY, WILL BE AN ITERATIVE MAP)..
I am using Bootstrap 4.1 and have the following architecture:
<!-- PLANTA -->
<main class="container-fluid d-flex align-items-center justify-content-center h-100">
<!-- SVG -->
<div id="info-box"></div>
<svg id="....." xmlns:svg="http://www.w3.org/2000/svg" width="500" height="500">
<object data="img/svgfile.svg" type="image/svg+xml"> </object>
</svg>
</main>
JS CODE TO INSERT THE SVG:
// Assign handlers immediately after making the request,
// and remember the jqxhr object for this request
var jqxhr = $.getJSON( "src/data/shoppings/lib/shoppings.json", function(data) {
var tst = document.getElementById("plant-src-svg")
var rect = document.createElementNS(tst,'object');
rect.setAttribute('type', "image/svg+xml");
rect.setAttribute('data', "src/data/shoppings/plants/via-parque/via_parque_P1_20160909.svg");
tst.appendChild(rect);
console.log(tst)
})
.always(function() {
console.log( "complete" );
})
.done(function() {
console.log( "second success" );
})
.fail(function() {
console.log( "error" );
});
Example of an SVG:
<svg xmlns="http://www.w3.org/2000/svg" width="896" height="446">
<g>
<path style="fill:#ffffff;stroke:#000000;stroke-width:0.5"
d="m -5218.054,4636.4899 0,-54.0253 38.0905,-38.0906 6.6437,0 0,24.7146 13.2874,0 0,-24.7146 14.6162,0 0,0.5315 0,27.8058 0.4429,0 27.9921,0 0.1107,0 0,0.4521 0,48.9862 0,0.3543 0.1108,0 0,6.4666 0.31,0 0,0.8858 -0.31,0 0,6.366 0.6643,0 0,0.3543 -35.4381,0 -0.084,0 0,-0.087 -66.4369,0"
id="1091"
inkscape:connector-curvature="0"
inkscape:label="#path58031" />
<path style="fill:#ffffff;stroke:#000000;stroke-width:0.5"
d="m -5145.4162,4544.374 0,28.3373 28.5457,0 13.531,0.01 0.8859,0 0,-0.4429 a 45.062392,45.062393 0 0 1 -6.8906,-22.2343 l 0,-2.4449 -7.4155,0 0,-3.2244 -0.3987,0 -7.2523,0 -13.7303,0 -6.8323,0 -0.4429,0"
id="1103A"
inkscape:connector-curvature="0"
inkscape:label="#path58033" />
<g>
<path style="fill:#ffffff;stroke:#000000;stroke-width:0.5"
d="m -5116.8705,4572.7113 14.4169,0.01 0,0.4429 -0.4429,0 0,6.6437 -13.974,0 0,-7.0958 z"
id="1102"
inkscape:connector-curvature="0"
inkscape:label="#path58035" />
<path style="fill:#ffffff;stroke:#000000;stroke-width:0.5"
d="m -5116.8705,4579.8071 13.9723,0 0,6.6437 0.4431,1e-4 -2e-4,0.442 -14.4168,0 0,-7.0858 z"
id="1101A"
inkscape:connector-curvature="0"
inkscape:label="#path58037" />
<path style="fill:#ffffff;stroke:#000000;stroke-width:0.5"
d="m -5116.8705,4586.8929 14.4169,0 1e-4,0.4438 -0.443,-1e-4 1e-4,6.4669 -13.9741,0 0,-6.9106 z"
id="path58039"
inkscape:connector-curvature="0" />
<path style="fill:#ffffff;stroke:#000000;stroke-width:0.5"
d="m -5116.8705,4593.8035 13.974,0 0,6.8205 0.443,1e-4 -1e-4,0.4429 -14.4169,0 0,-7.2635 z"
id="path58239"
inkscape:connector-curvature="0" />
<path style="fill:#ffffff;stroke:#000000;stroke-width:0.5"
d="m -5116.8705,4601.067 14.4169,0 0,0.4428 -0.4429,0 0,6.6437 -13.974,0 0,-7.0865 z"
id="path58041"
inkscape:connector-curvature="0" />
<path style="fill:#ffffff;stroke:#000000;stroke-width:0.5"
d="m -5102.8965,4608.1535 0,6.658 0.4429,0 0,0.3544 -7.5296,0 0,6.9837 0,0.2657 -1.9931,0 0,0.089 -0.8858,0 0,-0.089 -3.2333,0 0,0.089 -0.6643,0 -0.1108,0 0,-14.3504 13.974,0"
id="1098"
inkscape:connector-curvature="0"
inkscape:label="#path58043" />
<path style="fill:#ffffff;stroke:#000000;stroke-width:0.5"
d="m -5102.4536,4622.4153 -7.5296,0 0,-7.1009 7.5296,0 0,7.1009 z"
id="1097"
inkscape:connector-curvature="0"
inkscape:label="#path58045" />
</g>
</g>
</svg>
What you mean by "insert them dynamically " By the code you posted is an SVG only, but with several other "elements" inside, you want to control each of them by the ID is that? And what you intend to do with them?
– hugocsl
@hugocsl hi Ugo, good morning! I own several SVG’s like this in a folder, I would like to insert them into HTML5 from a specific user action.. All the tutorials I saw, was manually inserting svg in Html5, but this is not what I want.... I would have a "JSON" with the paths of each SVG in the root folder, and from a given user action the SVG would be plotted... I intend to show iterative maps to the user, where he hovers over and appears certain information.
– user109930