1

2 つのディレクティブがmy-svgありmy-rectます。私はそれらを次のように使いたい：

    <svg my-svg>
      <my-rect/>
    </svg>

my-rectSVGrectをmy-svg作成svgし、トランスクルージョンされた長方形を内部に持つノードを作成します。最後に、私が取得したいのは次のとおりです。

    <svg width='300' height='300'>
      <rect x="140" y="30" width="25" height="25" fill="red"></rect>
    </svg>

ここで例を参照してください: http://plnkr.co/edit/UIyUtX?p=preview

ご覧のとおり、赤い四角形は DOM に存在しますが、表示されません。この議論によると、SVGElement であるべきところが HTMLElement であるため、長方形が表示されていないようです。

同じ議論で示唆されているように、カスタム ディレクティブ コンパイラを使用して DOM ノードを HTMLElement 型から SVGElement 型に変換していますが、それでも私のユースケースではうまくいかないようです。

私は何を間違っていますか？

ありがとう

4

2 に答える 2

0

内部では、AngularJS は JQuery または JQLite を使用してテンプレートから要素を作成し、置き換えます。

JQuery と JQLite は両方とも、正しい SVG 名前空間で document.createElementNS ではなく document.createElement を使用します。

ディレクティブでは、AngularJS からの SVG 要素の作成を引き継ぐ必要があります。

次のヘルパー関数をディレクティブに挿入できます。

.value('createSVGNode', function(name, element, settings) {
  var namespace = 'http://www.w3.org/2000/svg';
  var node = document.createElementNS(namespace, name);
  for (var attribute in settings) {
    var value = settings[attribute];
    if (value !== null && !attribute.match(/\$/) && (typeof value !== 'string' || value !== '')) {
      node.setAttribute(attribute, value);
    }
  }
  return node;
})

テンプレート（外部またはインライン）を使用するのではなく、リンク機能でそれを使用します-次のようなもの：

link: function(scope, element, attrs) {
  var cx = '{{x}';
  var cy = '{{y}}';
  var r = '{{r}}';
  var circle = createSVGNode('circle', element, attrs);

  angular.element(circle).attr('ng-attr-cx', cx);
  angular.element(circle).attr('ng-attr-cy', cy);
  angular.element(circle).attr('ng-attr-r', r);
  element.replaceWith(circle);

  $compile(circle)(scope);
}

https://github.com/mjgodfrey83/angular-piechart/で、円グラフのコンテキストでこの動作の例を見ることができます。

非 html ディレクティブ テンプレート タイプを指定できるようにする修正が angular 1.3.0-beta8 に上陸しました -こちらを参照してください。使用例については、angular-chartsを確認してください。

それが役立つことを願っています。

于 2014-04-27T19:52:25.923 に答える
0

パッティング

<g>
    <my-rect></my-rect>
</g>

長方形を表示します。何が間違っているのかという質問には答えませんが、必要なものを表示するコードを取得します。私はこの問題を自分で見て時間を費やしましたが、うまくいかなかったため、別の方法で問題を解決しました。この方法を使用して解決しようとしている問題は何ですか?

于 2013-09-24T05:24:03.807 に答える