CODEWITHSUNDEEP
javascripthtmld3.jssvg
abrezey
abrezey

Reputation: 135

Appending to an existing svg file with D3

I am currently working on a project where I need to start with an SVG template file, load it into the DOM and finally append some elements to it based on some data. I am accomplishing this primarily with d3.

Most of this process works perfectly. However, text that I add to the svg does not appear on the page despite showing up in the html upon inspection.

Other svg elements like cirlces do show up as intended.

If it helps, this svg is being loaded into the popup html of a chrome plugin.

Any help would be greatly appreciated. I will reproduce the JS code that adds the SVG element below and the html it produces. Please let me know if I should provide any additional information.

JS code:

async function buildSVG (data) {
    const divsvg = d3.select("#svg-container").node(0)

    //add background svg as starting template
    await d3.xml("img_templates/breaking_news_square.svg")
        .then(data => {
            divsvg.append(data.documentElement)
            
        }); 
    const result = await addElements(data)
    console.log(result)
}

function addElements (data) {
    console.log("Adding elements")
    return new Promise(resolve => {
        
        //select svg d3 object 
        const svg = d3.select("svg")
        console.log(svg.node().getBBox())
        // console.log(svg)
        //Add quote text
        const quoteGroup = svg.append("g")
            .attr("class", "quoteGroup")
            .attr("transform", `translate(${margin.left},${margin.top})`)
        const quoteText = quoteGroup.append("text")
            .attr("class", "quote")
            .text("Test text")
          
        result = {result: "test"}
        resolve(result)
    })
}

Resulting HTML

<svg xmlns="http://www.w3.org/2000/svg" width="484" height="484" viewBox="0 0 484 484" fill="none">
<path d="M0 0H484V484H0V0Z" fill="#A81F1F"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M392.084 263.038L438.464 66.545C440.986 55.8608 434.004 45.2547 423.193 43.3484C412.393 41.4442 402.212 49.0042 400.912 59.8927L376.972 260.361C376.489 264.411 379.253 268.133 383.269 268.842C387.281 269.549 391.148 267.003 392.084 263.038ZM424.061 38.4244C410.434 36.0217 397.588 45.5608 395.947 59.2998L372.008 259.768C371.209 266.453 375.771 272.597 382.401 273.766C389.023 274.933 395.406 270.731 396.95 264.187L443.331 67.6937C446.513 54.2124 437.702 40.8297 424.061 38.4244Z" fill="white" fill-opacity="0.5"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M376.473 311.306C381.912 312.265 387.098 308.634 388.057 303.195C389.016 297.756 385.385 292.569 379.946 291.61C374.507 290.651 369.32 294.283 368.361 299.722C367.402 305.161 371.034 310.347 376.473 311.306ZM375.605 316.23C383.763 317.669 391.543 312.222 392.982 304.063C394.42 295.905 388.973 288.125 380.814 286.686C372.656 285.248 364.876 290.695 363.437 298.854C361.999 307.012 367.446 314.792 375.605 316.23Z" fill="white" fill-opacity="0.5"></path>
<g class="quoteGroup" transform="translate(42,100)"><text class="quote">Test text</text></g></svg>

Upvotes: 0

Views: 396

Answers (1)

Sphinxxx
Sphinxxx

Reputation: 13017

Your text is there, but it currently inherits fill="none" from the <svg> element, making it invisible. Try this:

...
    .text("Test text")
    .attr("fill", "black")

Upvotes: 1

Related Questions