7

AngularJS で SVG をレンダリングしようとしていますが、svg 要素のビューボックスを動的に変更できません。

Angular は「viewbox」属性をレンダリングしますが、ブラウザは「viewBox」属性を想定しています。したがって、結果は次のとおりです。

<svg height="151px" width="1366px" viewBox="{{ mapViewbox }}" viewbox="-183 425 1366 151">

期待する結果を得るにはどうすればよいですか:

<svg height="151px" width="1366px" viewBox="-183 425 1366 151">

ありがとう。

4

4 に答える 4

16

このディレクティブが機能するかどうかを確認します。

app.directive('vbox', function() {
  return {
    link: function(scope, element, attrs) {
      attrs.$observe('vbox', function(value) {
        element.attr('viewBox', value);
      })
    }
  };
});

HTML:

<svg height="151px" width="1366px" vbox="{{ mapViewbox }}">

プランク。svg タグを表示するには、「要素を検査」または「ソースを表示」する必要があります。

更新:アプリに jQuery が含まれている場合は、「jQueryの attr() は小文字を強制しますか?」を参照してください。

@Niahooは、jQueryが含まれている場合にこれが機能することを発見しました（彼はこの投稿を編集しましたが、何らかの理由で他のSOモデレーターがそれを拒否しました...私はそれが好きだったので、ここにあります）：

 element.get(0).setAttribute("viewBox", value);
于 2013-01-30T03:44:05.257 に答える
12

自分で解決策を探して、この答えにたどり着きましたこれを達成する正しい方法は、パターン変換を使用することですng-attr-view_box

于 2015-09-14T04:05:33.493 に答える
1

提案されたソリューションは機能しませんでした。私はJavaScriptのプロではありませんが、これはそうでした。

app.directive('vbox', function () {
    return {
        link: function (scope, element, attrs) {
            attrs.$observe('vbox', function (value) {
                element.context.setAttribute('viewBox', value);
            })
        }
    };
});
于 2014-02-28T18:36:22.290 に答える