JoomlaサイトのSVG画像がFirefoxで表示されない

Question

私はsvgに丸い画像を表示しようとしています。その目的は、（Gmailのように）グラフ内に丸いプロフィール画像を表示することです。人々の四角いイメージはスプライトシート（profiles.png）に保存され、私はsvgを動的に生成するためにd3.jsを使います。

これは、それは私がプレーンなテストHTMLでそれをテストしたとき、私はFirefoxとChromeで私のJoomlaのコンポーネントでそれを統合したときに、それも働いた働いていたラウンドの画像

var imgurl = '../../../images/profiles.png'; 

var svggraph = d3.select("#graph") 
    .append("svg:svg") 
    .attr("width", 300) 
    .attr("height", 300); 

var imgRadius = 40; 
var profilePos = 1; 
var numProfiles = 3; 

svggraph.append("defs") 
    .append("pattern") 
    .attr("id", "patternId") 
    .attr("height", 1) 
    .attr("width", 1) 
    .attr("x", "0") 
    .attr("y", "0").append("svg:image") 
    .attr("xlink:href", imgurl) 
    .attr("x", -profilePos*2*imgRadius) 
    .attr("y", 0) 
    .attr("width", numProfiles*2*imgRadius) 
    .attr("height", 2*imgRadius); 

svggraph.append("circle") 
    .attr("r", imgRadius) 
    .attr("cx", imgRadius) 
    .attr("cy", imgRadius) 
    .attr("fill", "url(#patternId)"); 


// to test the imgurl  
svggraph.append("svg:image") 
    .attr("id", "testImage") 
    .attr("xlink:href", imgurl) 
    .attr("x", 0) 
    .attr("y", 100) 
    .attr("width", 150) 
    .attr("height", 50); 

のためのコードの一部です。しかし、URLにGETクエリがある場合（基本的にパラメータがなくても？）、ラウンドイメージは表示されなくなります。デベロッパーツールの「ライブソースコード」にあるsvgタグは、「？」がある場合は同じように見えます。 urlにあるかどうか。常に正しいURL（クエリURLの有無にかかわらず）をChromeに表示します。要約中のSO

：Chromeで

• - >いつもととせずにFF "プレーン" HTMLで
• に動作しますか？ in url - >作品
• FF内にJoomlaがない？ URLで - >作品
• でFFのJoomlaで？ url→round画像が表示されない

テスト画像（#testImage）は常に表示されるため、画像へのURLは正しく表示されます。

同じ結果を持つパターンを使用するのではなくclipPathを使って同じことを試しました（URLとJoomlaでFFの場合は表示されません）。

私はすでに広範なGoogle検索を行っていますが、この問題は同じ問題で解決策ではありませんでした。 https://forum.joomla.org/viewtopic.php?t=912784

これを解決するために他に何ができるか分かりません。

Answer 1

FirefoxのJoomla 3.6.4サイトで同じ問題が発生しました。テンプレートから<base>タグを削除して解決しました。このコードをテンプレートのindex.phpファイルに追加しました。

$doc = JFactory::getDocument(); 
unset($doc->base);