imageタグを使用して、 HTML5svgタグ内のコンテンツとしてSVGファイルを使用しました。
これはChromiumでは機能しますが、Firefoxでは機能しません。
ズーム機能を追加すると、ChromeがSVG画像をラスター画像に変換することに気付きました。内部データに触れることなく、SVGファイルを含めるために使用できる画像タグまたはその他のSVG要素の動作を変更する方法はありますか？
編集：
実際、私はsvg要素でインタラクティブなアニメーションを実行するためのフレームワークを作成しています。この目的のために、 useタグを介してロードされたデータにアクセスできることが重要です。
ここにいくつかのソースコードがあるので、これが何であるかを見ることができます：
function createSVG( para ){
if ( ! para["shape"] ) return undefined;
var newElement = document.createElementNS("http://www.w3.org/2000/svg",para["shape"]);
for ( var p in para ) {
if ( p == "xlink:href" ) newElement.setAttributeNS("http://www.w3.org/1999/xlink", p, para[p] );
else if ( p != "shape") newElement.setAttribute( p, para[p] );
}
return newElement
}
function defineSVG( para ){
var data = createSVG( para );
$(myDefs).append(data); // myDefs is the <defs> element used to store shapes etc.
}
function loadImageSVG( id, file, width, height ) {
defineSVG({
"shape": "image",
"id" : id,
"xlink:href" : file,
"width" : width,
"height" : height,
"transform" : translate( - (width / 2), - (height / 2) ) // center image for later translation
});
}
function useSVG( id, show ) {
var data = createSVG({
"shape" : "use",
"id" : id,
"xlink:href": "#" + show,
"transform": ""
})
$(myContent).append( data ); // myContent is the <g> where i store <use> for all visible
return data;
}
/* load SVG file smiley.svg and give id smile */
loadImageSVG( "smile", "smiley.svg", 20, 20 )
/* draw a 5 x 5 grid of smilies */
for (var i = 0; i < 25; ++ i) {
var turtle = useSVG( "turtle" + i, "smile" );
turtle.setAttribute( "transform", "translate( " + (100 * (i / 5) ) + ", " + (100 * (i % 5 ) ) + " )" )
}