VivaGraph.js ライブラリを使用して、SVG でグラフをレンダリングしています。この投稿で推奨されているように、clipPath要素を使用している円にトリミングされた画像を表示しようとしています。ただし、大文字を含むタイプの新しい SVG 要素を作成すると、たとえば私の場合、コンストラクターに渡す文字列がキャメルケースであっても、clipPathDOM に挿入される要素は小文字になります。clippathSVG では大文字と小文字が区別されるため、この要素は無視されます。他のすべては問題ないようです。
「z-index」を変更することを期待して、子要素を追加する順序も変更しようとしましたが、これには影響しませんでした。
ノードを作成するために、グラフ内のノードの視覚的表現 (「addNode」コールバック) を作成する関数内で次のコードを使用しています。
var clipPhotoId = 'clipPhoto';
var clipPath = Viva.Graph.svg('clipPath').attr('id', clipPhotoId);
var ui = Viva.Graph.svg('g');
var photo = Viva.Graph.svg('image').attr('width', 20).attr('height', 20).link(url).attr('clip-path', 'url(#' + clipPhotoId + ')');
var photoShape = Viva.Graph.svg('circle').attr('r', 10).attr('cx', 10).attr('cy', 10);
clipPath.append(photoShape);
ui.append(clipPath);
ui.append(photo);
return ui;
ありがとうございました！