我使用图像标签将 SVG 文件用作 HTML5 svg标签内的内容。
这适用于 Chromium，但不适用于 Firefox。
当我添加一些缩放功能时，我意识到 Chrome 将 SVG 图像转换为光栅图像。有没有办法改变图像标签或任何其他 SVG 元素的行为，我可以使用它来包含 SVG 文件而不触及其内部数据。
编辑：
实际上我正在编写一个框架来在svg元素中做交互式动画。为此，我可以通过使用标签访问加载的数据，这一点很重要。
这里有一些源代码，所以你可以看到这是关于什么的：
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 ) ) + " )" )
}