CODEWITHSUNDEEP
javascriptangularjsdomsvgangular-services
Paco
Paco

Reputation: 4708

Angular directives not rendered in SVG

I'm doing some experiments with Angular and SVG.

I have created a simple directive, and I'm trying to render <text> elements which are coming from a template.

At first, it wasn't working at all, but I've found this interesting link: Including SVG template in Angularjs directive and I included this svgService. It works fine for everything I have tested, except one thing. It's missing the content of <text> tags.

I have tried to modify the code of the compile function in the directive but with no success. I'm not an expert in DOM.

Here's the plunker.

The code outputs no error. I had to add a few tests to see if rawElement was undefined. My problem seems to be that the childNode (that represents the content of <text> is acting differently than other nodes. Why is that ? And how can I fix the function ? Thanks

EDIT: The text renders in Chromium but not Firefox. Is there a way to make it work in Firefox ?

Upvotes: 0

Views: 321

Answers (2)

Robert Longson
Robert Longson

Reputation: 124299

You should use textContent rather than innerText to copy the text data i.e.

    // set the text from the template
    if(rawElement.localName === 'text'){
        replacement.textContent = rawElement.textContent;
    }

Firefox does not support the non-standard innerText property, only the standards compliant textContent.

Upvotes: 1

Adobe Flex Coder 0622
Adobe Flex Coder 0622

Reputation: 135

To me it looks like your code it working just fine. This issue that I found is that the value of the x and y for the AAAA is not inside the view-able area. I changed the code to look this way.

<text
    fill="#000000"
    x="0"
    y="5">
    AAAA
</text>

It came into view. A couple things to take into account is the size of the view-able area, and the location of the elements inside the view-able area. I hope this helps you out.

Upvotes: 0

Related Questions