Как создать AngularJs svg директива

Я пытаюсь создать угловую (1.5.5) директиву, где шаблон является элементом svg. Я прочитал это answer и несколько других, но я не могу получить свой простой элемент svg для показа. Я попытался максимально упростить его. Таким образом, эта простая директива должна рисовать круг при использовании внутри элемента svg, по крайней мере, этого я и пытаюсь достичь.Как создать AngularJs svg директива

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

Это не показывает круг с этим HTML

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

, если вместо того, чтобы изменить директиву включить элемент SVG, то он показывает (так как это теперь HTML элемент я предполагаю)

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>

И не имеет значения, если я задал шаблонNamespace «html» или «svg». Он показывает в любом случае.

Это не представляется возможным определить шаблон ГСВ в директиве, а вместо этого мне нужно добавить его программно, как предложено в this answer

Что мне не хватает?

Благодаря

источник

2016-04-22 Jesper Kristiansen

Ahh - Я нашел эту проблему, и я отправлю это как ответ вместо изменения на мой вопрос, добавив заменить: правда и форма показана

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

источник

2016-04-22 21:15:14

Как создать AngularJs svg директива

ответ

Смежные вопросы