how to create AngularJs svg directive

Question

I'm trying to create an angular (1.5.5) directive where the template is an svg element. I read this answer, and several others, but I'm not able to get my simple svg element to show. I have tried to simplify it as much as possible. So this simple directive should draw a circle when used inside a svg element, at least that is what I'm trying to achieve.

app.directive("svg01", () => {
    return {
        templateNamespace: "svg",
        template: `
            <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="4" fill="green" />
        `
        //template: `
        //  <svg width="100" height="100">
        //      <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="4" fill="white" />
        //  </svg>
        //`
    }
});

This does not show the circle with this html

<div style="height: 100px; background-color: lightgreen">
    <svg width="100" height="100">
        <svg01></svg01>
    </svg>
</div>

if instead I change the directive to include the svg element, then it shows (since this is now an html element I assume)

app.directive("svg01", () => {
    return {
        templateNamespace: "svg",
        //template: `
        //  <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="4" fill="green" />
        //`
        template: `
            <svg width="100" height="100">
                <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="4" fill="white" />
            </svg>
        `
    }
});

<div style="height: 100px; background-color: lightgreen">
    <svg01></svg01>
</div>

And it doesn't matter if I set the templateNamespace to "html" or "svg". It shows in either case.

Is it not possible to define an svg template in a directive, and instead I need to add it programmatically as suggested in this answer

What am I missing ?

Thanks

Jesper Kristiansen · Accepted Answer · 2016-04-22 21:15:14Z

1

Ahh - I found the problem, and I will post this as an answer instead of modifying my question, adding replace: true and the shape is shown

app.directive("svg01", () => {
    return {
        replace: true,
        templateNamespace: "svg",
        template: `
            <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="4" fill="yellow" />
        `

answered Apr 22, 2016 at 21:15

Jesper Kristiansen

1,9793 gold badges21 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to create AngularJs svg directive

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related