How to Create AngularJs Svg Direktive

Question

Ich versuche eine eckige (1.5.5) Direktive zu erstellen, wo die Vorlage ein SVG-Element ist. Ich lese dieses answer und einige andere, aber ich bin nicht in der Lage, mein einfaches svg Element zu zeigen zu erhalten. Ich habe versucht, es so viel wie möglich zu vereinfachen. Diese einfache Anweisung sollte einen Kreis zeichnen, wenn sie in einem SVG-Element verwendet wird, zumindest versuche ich das zu erreichen.

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> 
     //` 
    } 
}); 

Dies zeigt nicht den Kreis mit diesem html

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

wenn ich stattdessen der Richtlinie ändern, um das svg Element aufzunehmen, dann zeigt es (da dies nun ein HTML-Element ist gehe ich davon aus)

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> 

Und es spielt keine Rolle, wenn ich den templateNamespace zu "html" oder "svg" setze. Es zeigt sich in jedem Fall.

Ist es nicht möglich, eine svg-Vorlage in eine Richtlinie zu definieren, und stattdessen muss ich es programmatisch in this answer

wie vorgeschlagen hinzufügen Was bin ich?

Dank

Answer 1

Ahh - fand ich das Problem, und ich werde dies als eine Antwort hinterlassen, anstatt meine Frage zu modifizieren, das Hinzufügen ersetzen: true und die Form wird

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

gezeigt